HTML5 Canvas Cookbook

Drawing 3D text with shadows

If 2D text doesn't get you jazzed, you might consider drawing 3D text instead. Although the HTML5 canvas API doesn't directly provide us with a means for creating 3D text, we can certainly create a custom draw3dText() method using the existing API.

How to do it...

Follow these steps to create 3D text:

1. Set the canvas context and the text style:

     window.onload = function(){
       canvas = document.getElementById("myCanvas");
       context = canvas.getContext("2d");
       
       context.font = "40pt Calibri";
       context.fillStyle = "black";

2. Align and draw the 3D text:

   // align text horizontally center context.textAlign = "center"; // align text vertically ...