The Element <canvas> requires at least two attributes width and height which specifies the size of the canvas. Fallback content can be defined in between the opening and closing tags, incase <canvas> is not supported by the browser.
The 2D drawing context provides several properties and methods to draw shapes like circles, rectangles, paths and arcs on the fly.
1. The HTML5 <canvas> element is used to create an empty canvas(or a container), the element has three attributes id,width,height.
id:Attribute assigns an unique id to the canvas element.
width and height: Defines the dimensions of the canvas.
2.The canvas is initially blank, borderless and transparent..
The Canvas Context Object.
1.After creating a canvas we need to draw on it,for that we need a context object which will draw graphics on the canvas.
2.The Canvas element's specifications are designed to handle both 2D and 3D drawing context.Currently support is available for 2D context only, 3D context are in very nacent stage(eg WebGL) but will be available in the future.
Syntax: Context Object.
Example: 2D drawing ContextGive it a TRY! »
There are three method available while working with rectangles on the canvas : fillRect() , strokeRect() and clearRect()
All the three method have 4 arguments, which specify the starting X co-ordinate, starting Y co-ordinate, width and height in pixels.
The code below strokes a rectangle and then clears.
beginPath() : To create a new path, it denotes that a new path has begun.
arc(x, y, radius, startAngle, endAngle, counterclockwise) : To draw an arc with the centre at (x, y) with a startAngle and endAngle , the Boolean argument counterclockwise specifes if the arcs must be drawn clockwise or anticlockwise.
arcTo(x1, y1, x2, y2, radius) : To draw an arc from the last point to the point (x2, y2) and passing through (x1, y1), the argument radius specifies the radius of the arc.
bezierCurveTo(C1x, C1y, C2x, C2y, x, y) : To draw a bezier curve from the last point to the point (x, y) making use of the control points (C1x, C1y) and (C2x, C2y)
moveTo(x, y) : To move the cursor to the point (x,y) , it draws no line.
lineTo(x, y) : To draw a line from the last point to (x, y)
quadraticCurveTo(cx, cy, x, y) To draw a quadratic curve from the last point to the point (x, y) by making use of the control point (cx, cy)
The demo below draws two concentric circles with the center at (150, 150) with start angle at 0 and complete 2pi radians before stopping.
There are also three properties used for working with the text.
font : To specify the font of the text.
textAlign : To specify the text alignment. Values possible are start , end , left , right and center
textBaseline : To specify the baseline of the text , values possible are hanging, middle , alphabetic, ideographic and bottom.
The entire method is as follows: drawImage(imageElement, sx, sy, sWide, sHi, dx, dy, dWide, dHi).
imageElement: Denotes the image source which is a DOM object representing the image.
(sx, sy): Denotes the starting co-ordinates of source Image.
(sWide, sHi): Denotes the width and height of the source Image.
(dx, dy): Denotes the starting co-ordinates of the Destination Image.
(dWide, dHi): Denotes the width and height of Destination Image.
shadowColor : Specifies the color of the shadow, default value is black.
shadowOffsetX : The X co-ordinates of the offset. default value is 0.
shadowOffsetY : The Y co-ordinates of the offset. Default value is 0.
shadowBlur : The number of pixels to be blurred. Default value is 0.
The method addColorStop(offset,color) is used to specifiy the location of color stop and the color of the gradient.
The method createRadialGradinet(x0,y0,r0,x1,y1,r1) is used to create a Radial Argument
The first three arguments specifies the center of starting circle((x,y) co-ordinates) and radius, and the last three specifies the center and radius of the end circle.
The shapes drawn using the stroke method can be filled using pattern of images, the method createPattern() is used just to do that.
The method has two argument, the first arguments specifies the image to be used as pattern and the second argument sets the repeat pattern.The values possible are "repeat" , "repeat-x" , "repeat-y" and "no-repeat"