html5 Canvas tutorial :Structure of html5 canvas element

html5 Canvas tutorial :Structure of html5 canvas element

Html5 Canvas element has following structure.

<canvas id="myCanvas"  height= "200" width="200"  style="border: 1px solid #0000ff;">
</canvas>

First thing first: id="myCanvas"
we have given a idto this canvas. We will use this id when we use Javascript to draw our graphics on the canvas. A page can have more than one canvas, so unique id will serve our purpose of distinction between various canvas elements.If we have two canvas on a page.we will write code for these as.
==================
Code for Canvas 1
=================

<canvas id="canvas_1" width="200" height="200"  style="border : 1px solid #0000ff;">
</canvas>

==============

Code for canvas 2
=============

<canvas id="canvas_2" width="200" height="200" style="border : 1px solid #0000ff; ">
</canvas>

Our browser will show two rectangles of 200px wide and 200px length.

============================================
Two canvas element embed in one page
===========================================

---------------------------------------------------------------------------------------

Second thing in canvas is width="200".This part of code set the width of our canvas . Width is the attribute of canvas and 200 is value of width.We always write attribute of HTML element in general form

attributeName ="value"

Value can be any amount which this attribute can have. This can be number, text etc.Remember value is written always in inverted coma
width= 200not correct. width ="200" is correct style.
The third thing in our canvas tag is

length="200"

This attribute of length set the length our canvas element,"200" represent 200 pixels.
Our last important thing is:

style ="border 1px solid #0000ff;"

In this line style is used to set style of our html element. This style is for use of CSS .CSS means cascading style sheet. For detail read tutorial about css.
The value for style is "border 1px solid #000ff;"
In this line border is used to draw border around a specific element. Here we are using border along canvas element.1px means that this border will be 1px wide. You can set different value for border and check the result. solid is style of border. Border can have different styles such as dotted, solid, double, inset, outset, groove and ridge
then there is something #0000ff
This is color for border. Color can be represent by different way. You can set name of color such as red ,green ,blue.
In RGB format, six hexadecimal digits are used to represent the value of color. Here R stands for Red ,G for Green and B for Blue.

First two digits are for Red, next two digits represent Green color value and last two digits represent Blue color value. Any color can take value from 0 to 255.With these combination of three colors we can create millions of colors. In hexadecimal these value will be from 00 to ff. The semicolon is used to end the statment
=============================================================

html5 canvas tutorials live demo on codepen

===========================================================

<canvas  id="myCanvas" width="600" hight ="400">
  
</canvas>
<canvas  id="myCanvas2" width="600" hight ="400">
  
</canvas>

See the Pen pvVjYv by aslam (@aslamwaqar) on CodePen.

--------------------------------------------------------------------------------------------------

For further reading visit

www.html5canvastutorials.com