HTML DOM Canvas Object

Canvas Object

The Canvas Object is new in HTML5.

The HTML5 <canvas> tag is utilized to draw designs, on the fly, with JavaScript.

Access a Canvas Object

You can get to a <canvas> component by utilizing getElementById():

var x = document.getElementById("myCanvas");

Create a Canvas Object

You can make a <canvas> component by utilizing the document.createElement() method:

var x = document.createElement("CANVAS");

Note: The <canvas> component has no illustration capacities of its own (it is as it were a compartment for illustrations) - you should utilize a content to really draw the graphics.

The getContext() strategy restores an article that gives strategies and properties for illustration on the canvas.

This reference will cover the properties and strategies for the getContext("2d") object, which can be utilized to draw content, lines, boxes, circles, and that's just the beginning - on the canvas.

Colors, Styles, and Shadows

Property Description
fillStyle Sets or returns the shading, angle, or example used to fill the drawing
strokeStyle Sets or returns the shading, angle, or example utilized for strokes
shadowColor Sets or returns the shading to use for shadows
shadowBlur Sets or returns the haze level for shadows
shadowOffsetX Sets or returns the level separation of the shadow from the shape
shadowOffsetY Sets or returns the vertical separation of the shadow from the shape
Method Description
createLinearGradient() Creates a direct slope (to use on canvas content)
createPattern() Repeats a predetermined component in the predefined direction
createRadialGradient() Creates an outspread/roundabout angle (to use on canvas content)
addColorStop() Specifies the hues and stop positions in an inclination object

Line Styles

Property Description
lineCap Sets or returns the style of the end tops for a line
lineJoin Sets or returns the kind of corner made, when two lines meet
lineWidth Sets or returns the present line width
miterLimit Sets or returns the greatest miter length


Method Description
rect() Creates a rectangle
fillRect() Draws a "filled" rectangle
strokeRect() Draws a square shape (no fill)
clearRect() Clears the predetermined pixels inside a given rectangle


Method Description
fill() Fills the present illustration (path)
stroke() Actually draws the way you have defined
beginPath() Begins a way, or resets the current path
moveTo() Moves the way to the predefined point in the canvas, without making a line
closePath() Creates a way from the present indicate back the beginning point
lineTo() Adds another point and makes a line starting there to the last indicated point in the canvas
clip() Clips a district of any shape and size from the first canvas
quadraticCurveTo() Creates a quadratic Bézier curve
Creates a cubic Bézier curve
arc() Creates a circular segment/bend (used to make circles, or parts of circles)
arcTo() Creates a circular segment/bend between two tangents
isPointInPath() Returns genuine if the predefined point is in the present way, generally false


Method Description
scale() Scales the present illustration greater or smaller
rotate() Rotates the current drawing
translate() Remaps the (0,0) position on the canvas
transform() Replaces the present change lattice for the drawing
setTransform() Resets the current change to the character framework. At that point runs transform()


Property Description
font Sets or returns the present textual style properties for content content
textAlign Sets or returns the present arrangement for content content
textBaseline Sets or returns the present content standard utilized when drawing text
Method Description
fillText() Draws "filled" message on the canvas
strokeText() Draws message on the canvas (no fill)
measureText() Returns an article that contains the width of the predetermined text

Image Drawing

Method Description
Draws a picture, canvas, or video onto the canvas

Pixel Manipulation

Property Description
width Returns the width of an ImageData object
height Returns the tallness of an ImageData object
data Returns an item that contains picture information of a predetermined ImageData object
Method Description
createImageData() Creates another, clear ImageData object
getImageData() Returns an ImageData object that duplicates the pixel information for the predetermined square shape on a canvas
putImageData() Puts the picture information (from a predefined ImageData object) back onto the canvas


Property Description
globalAlpha Sets or returns the present alpha or straightforwardness estimation of the drawing
globalCompositeOperation Sets or returns how another picture are drawn onto a current image


Method Description
save() Saves the condition of the current context
restore() Returns recently spared way state and attributes

Standard Properties and Events

The canvas object likewise underpins the standard properties and events.

Related Pages

HTML instructional exercise: HTML5 Canvas