Back to Top

HTML5 Canvas Element Tutorial


The canvas element is part of HTML5 which allows to render 2D shapes and bitmap images in dynamic manner. tag is an HTML5 element which is used to draw graphics using scripting language.Earlier I have explained about Clean HTML content in PHP and The DocType In HTML.

Canvas Element History

→ Canvas element was initially introduced by Apple for the Mac OS X WebKit component in 2004.

→ Later on in 2005 it was taken in version 1.8 of Gecko browser

  • Gecko (layout engine)
  • Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation

Now almost all major browser supports the canvas element.To use the canvas element, you need a basic idea about HTML and Javascript.

Introduction about Canvas

The canvas element is defined using width and height attributes in HTML.Now HTML5 Canvas API is used for developing a canvas block. The canvas element supports a 2-dimensional drawing surface which you can develop with JavaScript.

Also Read: HTML5 AutoFocus Explained

< canvas > element in HTML5 gives an easy and effective way to draw graphics using JavaScript. It is used to draw graphs, make photo compositions or do some kind of animations in an object.


Let’s see the simple < canvas > element syntax with two specific attributes width and height only.Also with the core HTML5 attributes like id.


Here is the simple example on using < canvas > element in HTML5.

This text is displayed if your browser does not support HTML5 Canvas.

You can easily get that < canvas > element in the DOM using getElementById() method of Javascript using following code:

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

Let’s see the code snippet with using it, can draw on the canvas. For that, you need to use Javascript code as follows

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

This code draws a red rectangle on the screen.

SVG : svg extension images also supports canvas.

The 2D Rendering Context:

The < canvas > element is by default blank and a script first needs to access the rendering context and draw on it for displaying anything using canvas.

The canvas element has a getContext DOM method which used to obtain the rendering context and its drawing functions. getContext is a function which accept one parameter, the type of context 2d.

Following is the code snippet which get required context for < canvas > element:


Browser Support:

HTML5 Canvas element is working fine in most of the browsers except for IE which doesn’t have native canvas support. In most cases, Firefox works fine but Chrome and Safari appear to offer the best experience for canvas element.

You can use ExplorerCanvas to support canvas element in Internet Explorer. You just need to include following javascript code:


I hope you liked this article. You must get a clear idea about the canvas element in HTML5. I would like to know your invaluable suggestion on this topic.

Comments (1)

  1. Nice Post this will help us to understand the about how to use canvas in html 5 … thank you it will help for new beginner for there work ……

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to use Pagination in CodeIgniter

Posted on 7 years ago


Basic Github commands

Posted on 3 years ago


Learn ElasticSearch in 10 Minutes

Posted on 3 years ago


The Readers’ Poll – January 2013

Posted on 6 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago