Drawing with Canvas Element

andy - 06 Aug, 2013 3693 Views 0 Comment

HTML5 Canvas Element allows you to draw graphics, images or text. In order to make this canvas element works, we will use javascript to draw the graphics.

Before we started, see the basic syntax elements and what attributes are required for canvas element.

//sample of canvas element
<canvas id="mycanvas" width="250" height="250">
Canvas element required start and end canvas tag. The attributes for width and height are required as well. Although ID is not required but it is needed by the javascript to get the canvas object.

Example of Drawing Rectangles in HTML5

Below are the available function to draw rectangles and we include some demos for you to have a look as well.

/* canvas html5 syntax */
<canvas width="600" height="400" id="canvasdemo" class="canvasdemo" >


/* we include a css style to draw a black line of the canvas so we know their dimension as by default the canvas background color is transparent. */
<style type="text/css">
	.canvasdemo{border:solid 1px black;}

/* We include this javascript to draw the rectangles. */
<script type="text/javascript">
	$(function () {
		//we getting the canvas object and set as 2d context
		var canvasdemo = document.getElementById("canvasdemo");
		var cCanvasdemo = canvasdemo.getContext("2d");

		// we drawing two rectangles yellow and blue to be stacked together.
		cCanvasdemo.fillStyle = "yellow";
		cCanvasdemo.fillRect(50, 50, 100, 100);

		cCanvasdemo.fillStyle = "blue";
		cCanvasdemo.fillRect(70, 70, 100, 100);

		//we use the strokeRect function to draw stroke rectangular
		cCanvasdemo.strokeRect(370, 50, 100, 100);

		//we use clearRect function to clear/empty rectangular, you will see the yellow rectangular has been cut off/cleared by the clearRect object
		cCanvasdemo.fillStyle = "yellow";
		cCanvasdemo.fillRect(50, 250, 100, 100);
		cCanvasdemo.clearRect(70, 270, 100, 100);

Quick Demo - See how easy to draw rectangles using HTML5 Canvas Element


You can as well drawing text inside the canvas. See another example below:

/* Canvas syntax */
<canvas width="600" height="120" id="canvasdemo2" class="canvasdemo">


/* Include a javascript to trigger the drawing */
<script type="text/javascript">
	$(function () {
		var canvasdemo2 = document.getElementById("canvasdemo2");
		var cCanvasdemo2 = canvasdemo2.getContext("2d");

		// We set the text properties. In order for the text to work properly, you have to follow this style format [Font Style] [Font Size] [Font Name], (position left), (position top).
		cCanvasdemo2.font = "italic 20px Arial";
		cCanvasdemo2.strokeText("Learn HTML 5 with", 10, 50);

Demo of Drawing Text in HTML5



There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

Related Tutorials

What is HTML5?

Learn what is the html5 and use this new technology to build your new site.