HTML5 CANVAS: Basic shapes

In this post I am taking care of some basic staff like draw rectangular, line, circle, image etc in HTML5 CANVAS. These are the basic structure but we need to use each of them in advanced functions.

start the code:

Like the previous post, for creating a HTML5 CANVAS page, we placed a CANVAS tag with width 500, height 300 into the body section and JavaScript functions into the bottom of the HTML before the body tag close(in the previous post we discuss the possibilities for placing JavaScript codes into the page).
Almost every CANVAS JavaScript functions have 2 common lines, one which we take the CANVAS in a veriable and then get the 2d context of the variable
So our first part of code alaways same, like
Like, previous post we should place the JS code in the bottom of the page.
Var canvas = document.getElementById(‘canvas’);
Var getcontext = canvas.gerContext(‘2d’);
//We will only discuss the 2d function in this series of HTML5 CANVAS posts.
And into the body section, put this code like mention above.
<canvas width=”500” height=”300” id=”canvas”></canvas>
Lets start draw something.

HTML5 CANVAS

Hi! Everyone, in this series of post I am going to discuss about HTML5 CANVAS. I am going to discuss every part of it from the very beginning to advance level.Here, most of the example and theories have benn collected form the WEB and several books. I will share them all in between tutorials and demonstration.
HTML has one of the most powerful tag CANVAS. We often use this as plugin for graph or any shape based plugins. Now I am giving you an oportunity to undefy this weapon and make it as favorite one.