HTML5: HTML5 Canvas

What is Canvas?

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 order to leverage the HTML5 Canvas, you’ll need to place the canvas tag somewhere inside your HTML, create an initialize JavaScript function that accesses the canvas tag once the page loads, and then utilize the HTML5 Canvas API to draw your visualizations.

The HTML5 canvas element uses JavaScript to draw graphics on a web page.
A canvas is a rectangular area, and you control every pixel of it.
The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

Create a Canvas Element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

<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.

1.1 HTML5 Canvas

1.2 Lines

1.3 Curves

1.3.2 Quadratic Curve

1.3.3 Bezier Curve

1.4 Paths