- Canvas Cookbook
- Bhushan Purushottam Joshi
- 217字
- 2021-07-16 11:03:15
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:

There's more...
Try the following:
- Changing the color of the shadow
- Increasing the depth
- 密碼學原理與Java實現
- JavaScript 網頁編程從入門到精通 (清華社"視頻大講堂"大系·網絡開發視頻大講堂)
- MySQL數據庫管理與開發實踐教程 (清華電腦學堂)
- Windows Server 2016 Automation with PowerShell Cookbook(Second Edition)
- Instant Lucene.NET
- AIRIOT物聯網平臺開發框架應用與實戰
- SQL Server實用教程(SQL Server 2008版)
- Python 3.7從入門到精通(視頻教學版)
- 從零開始學Python網絡爬蟲
- OpenCV 3 Blueprints
- Struts 2.x權威指南
- Go語言從入門到精通
- PHP+MySQL Web應用開發教程
- Android嵌入式系統程序開發(基于Cortex-A8)
- JavaScript語法簡明手冊