HTML5 Canvas Element Tutorial

May 19, 2011

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In other words, in order to leverage the HTML5 Canvas, you’ll need to place the canvas tag somewhere inside your HTML, create an initializer JavaScript function that accesses the canvas tag once the page loads, and then utilize the HTML5 Canvas API to draw your visualizations.

<canvas id="myCanvas"></canvas>

HTML5 Canvas Template

<!DOCTYPE HTML>
<html>
    <head>
        <script>

            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // do stuff here
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>

HTML5 Canvas Element Explanation

The code above will be the base template for all of your future HTML5 Canvas projects. We can define the height and width of the canvas tag using the height and width attributes, just like we would with any other HTML tag. Inside the initializer function we can access the canvas DOM object by its id, and then get a 2-d context using the getContext() method.

By Eric Rowell at html5canvastutorials.com

HTML5 Canvas HTML5 Canvas Element, html5 canvas tutorials,