HTML Canvas Text Font
<html> <head> <script> window.onload = function(){ canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); /*ww w . j a va 2 s . c o m*/ context.font = "40pt Calibri"; context.fillStyle = "black"; // align text horizontally center context.textAlign = "center"; // align text vertically center context.textBaseline = "middle"; draw3dText(context, "java2s.com!", canvas.width / 2, 120, 5); }; function draw3dText(context, text, x, y, textDepth){ var n; // draw bottom layers for (n = 0; n < textDepth; n++) { context.fillText(text, x - n, y - n); } // draw top layer with shadow casting over // bottom layers context.fillStyle = "red"; context.shadowColor = "black"; context.shadowBlur = 10; context.shadowOffsetX = textDepth + 2; context.shadowOffsetY = textDepth + 2; context.fillText(text, x - n, y - n); } </script> </head> <body> <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> </canvas> </body> </html>