HTML5 Canvas Example - Display Graphics in HTML page

HTML5 Canvas element can be used to draw graphics on the fly in HTML page. Canvas element provides a 2D drawing space which can be modified by HTML developers using Javascript.
This HTML5 canvas element example shows how to display graphics of sales per year figures.

HTML5 Canvas Graphics Example

Below graphics shows sales amounts of a product per year basis. HTML5 codes used to draw lines in canvas for X-axis and Y-axis are managed by using context.moveTo(), context.lineTo() and context.stroke() methods. In this canvas bar graphic, for yearly bars I used canvas rectangles. context.rect() method can be used to draw rectangle in canvas element. I modified the context.fillStyle property by changing fill color for each sales figure, so I can display each bar in a different color to make the graphics more readable. Graphics title, x-axis nodes and each figure per year is written on canvas using context.fillText() method. Of course context object fillStyle property is modified for text color, font face and font size before adding text on HTML5 Canvas element.

Here is the HTML5 source code for developers working on HTML5 programming for Canvas element.


function jsDrawGraphics() {



    var canvas = document.getElementById("html5canvas");

    if (canvas.getContext) { // check for HTML5 Canvas support of user browser



        var context = canvas.getContext("2d");

        context.strokeStyle = "#000000";



        var origin_x = 50;

        var origin_y = 350;



        // Graphics Title

        context.font = "20px sans-serif";

        context.fillText("Sales per Year", 100, 35);

        context.fill();



        context.font = "10px sans-serif";



        context.beginPath();



        // x-axis

        context.moveTo(origin_x, origin_y);

        context.lineTo(origin_x + 275, origin_y);



        // y-axis

        context.moveTo(origin_x, origin_y);

        context.lineTo(origin_x, origin_y - 300);



        context.closePath();



        // Draw both axis

        context.stroke();



        var barDistance = 25;

        var barWidth = 50;

        var currentX = origin_x + barDistance;



        // first figure

        context.beginPath();

        context.rect(currentX, origin_y - 200, barWidth, 200);

        context.closePath();

        context.fillStyle = "blue";

        context.fill();



        context.fillText(200, currentX + 15, origin_y - 200 - 10);

        context.fillText(2010, currentX + 15, origin_y + 10);

        context.fill();



        currentX = currentX + barDistance + barWidth;



        // second figure

        context.beginPath();

        context.rect(currentX, origin_y - 250, barWidth, 250);

        context.closePath();

        context.fillStyle = "red";

        context.fill();



        context.fillText(250, currentX + 15, origin_y - 250 - 10);

        context.fillText(2011, currentX + 15, origin_y + 10);

        context.fill();



        currentX = currentX + barDistance + barWidth;



        // third figure

        context.beginPath();

        context.rect(currentX, origin_y - 175, barWidth, 175);

        context.closePath();

        context.fillStyle = "green";

        context.fill();



        context.fillText(175, currentX + 15, origin_y - 175 - 10);

        context.fillText(2012, currentX + 15, origin_y + 10);

        context.fill();

    }

}