Share to

You can earn money or coins from your share:)

Tips: you can use Sparticle for uploading away3D effects.

Tips: you can download Sparticle for uploading effects.

Tips: The ActionScript editor is supporting Away3D, Starling, Dragonbones and Flex frameworks.

Tips: paste the web page URL then click button:) Your Best Source for Gaming
Login    or


HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

Here is a simple <canvas> element which has only two specific attributes width andheight plus all the core HTML5 attributes like id, name and class etc.

<canvas id="mycanvas" width="100" height="100"></canvas>

You can easily find that <canvas> element in the DOM using getElementById() method as follows:

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

Let us see a simple example on using <canvas> element in HTML5 document.

<!DOCTYPE HTML><html><head><style>#mycanvas{   border:1px solid red;}</style></head><body>   <canvas id="mycanvas" width="100" height="100"></canvas></body></html>

To learn above concept - Do Online Practice using latest version of either Safari or Opera.

The Rendering Context:

The <canvas> is initially blank, and to display something, a script first needs to access the rendering context and draw on it.

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

Following is the code to get required context along with a check if your browser supports <canvas> element:

var canvas  = document.getElementById("mycanvas");if (canvas.getContext){      var ctx = canvas.getContext('2d');      // drawing code here   } else {      // canvas-unsupported code here }

Browser Support

The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively.

You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to include this javascript as follows:

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

this tutorial is from


You must Sign up as a member of Effecthub to view the content.

1228 views    0 comments

You must Sign up as a member of Effecthub to join the conversation.


Or Login with Your Email Address:

Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character