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.

Your browser does not support HTML5 Canvas element.
HTML5 Canvas graphics example

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();
}
}