Making a text shadow with canvas

HTML5 brings a new element to web design, the <canvas> element. This is used to create graphics on a web page on the fly using JavaScript.

Getting ready

The <canvas> element creates a rectangular area on your page. It dimensions default to 300px by 150px. You can specify different settings inside the JavaScript. The code in this recipe grows quickly, so you can get the whole code online at the Packt Publishing's website.

How to do it...

To begin, create a simple HTML page with a <canvas> element:

<!DOCTYPE HTML>
<html>
     <head>

     </head>
     <body>
           <canvas id="thecanvas"></canvas>
     </body>
</html>

The JavaScript gets the canvas element from the DOM.

var canvas = document.getElementById('thecanvas');

It then calls the getContext() ...

Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial