canvas in html5 Working With Shapes And Colors

canvas in html5 Working With Shapes Colors And Styles 

canvas in html5 Working With Shapes

After creating canvas shapes can be drawn on it like square,circle,rectangle.The java script functions are used to draw object on canvas.The following methods can be used  to create shapes:

• rect()
• fillRect(0
• strokeRect()
• clearRect()

---

Draw On Canvas With Java Script

The following figure illustrates how  to draw rectangle and fill rectangle and how to create outline of rectangle:

Here in  canvas in html5,
four values or dimensions are taken as in the ctx.rect the 30,40 are the x and y coordinates of rectangle. And 120,120, is size of rectangle to be made.

---

canvas in html5 Working With Colors

The following properties can be used to apply colors on canvas objects:

• FillStyle
• StrokeStyle
• Shadow Color

Consider the following code to fill style , stroke style and to apply shadow color to shapes.

---

• canvas in html5 Gradients