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 of creating 3D text, we can certainly create a custom draw3dText() method using the existing API:

How to do it...

The recipe is as follows:

<html>
<head>

<title>A 3D Text</title>
<script>
  function init()
  {
    can  = document.getElementById("MyCanvasArea"); 
    
    ctx = can.getContext("2d");
    
    var X=Math.round(can.width/2);
    
    drawLine(X,10,X,390,2,'black','butt');

    draw3dText(X,50,'Sujata-An Architect & an Entrepreneur','center','top','blue',1);
    draw3dText(X,100,'Prashant-An MBA','left','middle','green',2);
    draw3dText(X,150,'Amit-An Engineer','right','bottom','red',3);
    draw3dText(X,200,'Sampada-An Engineer','start','alphabetic','orange',4);
    draw3dText(X,250,'Sukhada-A Classical Singer','end','hanging','aqua',5);
    draw3dText(X,300,'Kalyani-A Chartered Accountant','center','ideographic','magenta',6);
    ctx.direction="rtl";
    draw3dText(X,350,'Vivek-An IITian','start','alphabetic','navy',7);
  }
  function draw3dText(X,Y,message,align,baseline,color,depth)

  {

    ctx.beginPath();
    var i=0;
    ctx.font='20pt Arial';
    
    ctx.textAlign=align;
    ctx.textBaseLine=baseline;
    ctx.fillStyle=color;
    ctx.fillText(message,X,Y); 
    ctx.shadowColor="lightgrey";
    ctx.shadowBlur=5;
    while(i<=depth)
    {
        ctx.shadowOffsetX=depth+1;
        ctx.shadowOffsetY=depth+2;
        ctx.fillText(message,X,Y);   
        i++;
    }
    ctx.closePath();
  }
  function drawLine(xstart,ystart,xend,yend,width,color,cap)
  {
  //refer the first recipe
  //....
}
</script>
</head>
<body onload="init()">
  <canvas id="MyCanvasArea" width ="800"  height="400" style="border:2px solid black">
    
        Your browser doesn't currently support HTML5 Canvas.
    
  </canvas>
</body>
</html>

How it works...

This recipe is created by appending some code to the function for drawing the text. The properties to apply shadow are used on the text. The properties shadowColor, shadowOffsetX, shadowOffsetY, and shadowBlur are set to achieve the 3D effect. Before the loop begins, the text is drawn with the specified color. Then the shadow color and blur level is set. And within the loop, the text is drawn with changed X and Y offset for the shadow for certain depth. The properties used are summarized here:

Property	Description
`shadowOffsetY`	Sets or returns the vertical distance of the shadow from the shape.
`shadowOffsetX`	Sets or returns the horizontal distance of the shadow from the shape.
`shadowBlur`	Sets or returns the blur level for shadows.
`shadowColor`	Sets or returns the color to use for shadows.

There's more...

Try the following:

Changing the color of the shadow
Increasing the depth

Canvas Cookbook

By : Purushottam Joshi

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

Drawing 3D text with shadows

How to do it...

How it works...

There's more...

Canvas Cookbook

By : Purushottam Joshi

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

Drawing 3D text with shadows

How to do it...

How it works...

There's more...

Create a Note

Delete Bookmark

Delete Note

Edit Note

Confirmation

Buy this book with your credits?