canvas in html5

canvas in html5

canvas in html5 is used to draw graphics on web page using javascript. The canvas> element is just the container for graphics you must use script to actually draw graphics.

---

canvas in html5 can draw text: canvas is used to draw colorful text.

canvas in html5 can draw Graphics: canvas is used to draw graphics with imagery of graphs and charts.

canvas in html5 can be Animated: canvas objects can move.

canvas in html5 can Interactive:canvas can respond to events and user actions.

canvas in html5 can be used in Games:canvas provide facility to be used in games as well. 

---

For Creating canvas in html5 You Perform Two Tasks:

• Define Canvas
• Access Canvas

Define Canvas

canvas in html5 is defined in the body section of html document.

So, you can define canvas as shown below:

here,

• ID Attribute: It is used to specified to access the canvas in java script.
• HEIGHT Attribute:It is used to specify height of canvas.The default value for height attribute is 150 pixels.
• WIDTH Attribute:It is used to specify the with of canvas.The default value for width attribute is 300 pixels.
• STYLE Attribute:It is used to define the style to be applied to canvas.Here the border of 1 px solid black is applied to canvas.
• The Height and Width attributes are necessary to define size of canvas.

---

Access Canvas

Defining canvas only create blank surface for graphics.You can type the following code to access the canvas to actually draw the object on canvas:

Here in canvas in html5,

getelementbyid is used to refer the element with id mycanvas and stores the reference in variable named c.And getcontext method is used to draw objects .The object is stored in vairiable called ctx.The getcontext method accepts string argument to specify the type of canvas to be created.Here 2d is accepted as an argument.You can also pass 3d here but most of the browsers suppport 2d graphics only.

---

• canvas in html5 working with shapes and colors