Search within TutorialsPark

Javascript Graphics: 2D Context


Learn to use JavaScript to draw on 2D Context.


Javascript Graphics: 2D Context.

The HTML5 2D Context uses the element <canvas> to create an empty 2D context onto which shapes can be created using JavaScript.

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.


Javascript 2D Graphics: Using the Canvas Element.

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..

3.Using Javascript on this 2-Dimensional resolution dependent bitmap canvas we draw graphics,charts, animations etc on the fly. The default size of the canvas is 300 x 150(width * length).

Syntax: Javascript 2D Context: Canvas Element.

Example: Javascript 2D Context: Canvas Element.

Give it a TRY! » NOTE-The <canvas> element was first introduced by Apple Inc while developing dashboard widgets for Safari in July 2004.


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 Context

Give it a TRY! »


Javascript Canvas - 2D Context : Rectangles

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.

Example: JavaScript 2D Contect :

Give it a TRY! » Note: The method fillRect() is used to draw a rectangle filled with the specified color.


Javascript 2D Context : Stroke and Clear Rectangle.

The JavaScript 2D Context, method strokeRect() is used to draw a rectangle outline with the specified color, and method clearRect() is used to clear the rectangle.

The code below strokes a rectangle and then clears.

Example: JavaScript 2D Context : Stroke and Clear Rectangle Methods

Give it a TRY! » Note: The method clearRect() is used to clear a rectangle of specified size


Javascript 2D Context : Drawing Paths

The JavaScript 2D Context has method to draw paths, arcs, curves, lines etc. The method used are as follows:

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.

Example: JavaScript 2D Context : Drawing Paths

Give it a TRY! » Note: You can even create a lot of complex stokes and fills using the above properties.


Javascript 2D Context : Text.

The JavaScript 2D Context, methods of fillText() and strokeText() are used to draw text, it has four arguments: the text to draw, x-co-ordinate and y-co-ordinate and finally size in pixels.

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.

Example: JavaScript 2D Context : Stroke and Clear Rectangle Methods

Give it a TRY! » Note: You can even create a lot of complex stokes and fills using the above properties.


Javascript 2D Context : Draw Images

In JavaScript 2D Context, method drawImage() is used to pass an Image in the HTML document, the arguments specify the destination of X and Y co-ordinates..

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.

Example: JavaScript 2D Context : DrawImages

Give it a TRY! » Note: You can even create a lot of complex stokes and fills using the above properties.


Javascript 2D Context : Shadows

In the JavaScript 2D Context, shadows can be drawn along the shape of the drawing.

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.

Example: JavaScript 2D Context : Stroke and Clear Rectangle Methods

Give it a TRY! » Note: For both the rectangles the shadow is drawn using the same method.


Javascript 2D Context : Gradients both Linear and Radial

The JavaScript 2D Context provides the method createLinearGradient(x0,y0,x1,y1) is used to create a linear Gradinet. The method accepts four arguments, which specifies the starting and ending co-ordinates.

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.

Example: JavaScript 2D Context : Gradients- Linear and Radial

Give it a TRY! » Note: The radial gradients begin at the same center


Javascript 2D Context : Patterns

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"

Example: JavaScript 2D Context : Patterns

Give it a TRY! » Note: Patterns always begin at point (0,0) unlike gradients.