introduction of HTML5 Canvas



  • The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
  • The <canvas> element not having drawing abilities of its own. It is only a container for graphics.
  • We must use a script to draw the graphics.
  • The getContext() method sets an object which provides methods and properties for drawing on the canvas.
  • This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles on the canvas.

Colors, Styles, and Shadows:

Property Description
fillStyle Sets the color, gradient, or pattern used to fill the drawing
strokeStyle Returns the color, gradient, or pattern used for strokes
shadowColor Sets the color to use for shadows
shadowBlur Sets the blur level for shadows
shadowOffsetX Returns the horizontal distance of the shadow from the shape
shadowOffsetY Sets the vertical distance of the shadow from the shape
Method Description
createLinearGradient() To use on canvas content creates a linear gradient
createPattern() Repeats a particular element in the specified direction
createRadialGradient() Designs a radial/circular gradient (to use on canvas content)
addColorStop() Defines the colors and stop positions in a gradient object

Line Styles:

Property Description
lineCap Sets the style of the end caps for a line
lineJoin Returns the type of corner created, when two lines meet
lineWidth Sets width of the current line
miterLimit Returns the maximum miter length

Rectangles:

Method Description
rect() Creates a rectangle
fillRect() Draws a "filled" rectangle
strokeRect() Draws a rectangle with no fill
clearRect() Clears the particular pixels within a given rectangle

Paths:

Method Description
fill() Fills the current drawing path
stroke() Actually draws the path where we have defined
beginPath() Begins or resets the current path
moveTo() Moves the path to the particular point in the canvas, without creating a line
closePath() Creates a path from the current point back to the starting point
lineTo() Adds a new point and creates a line to that point from the ending point in the canvas
clip() Cuts a region of any shape and size from the original canvas
quadraticCurveTo() Designs a quadratic Bézier curve
bezierCurveTo() Designs a cubic Bézier curve
arc() Creates an arc/curve (used to create circles, or parts of circles)
arcTo() Creates an arc/curve between two tangents
isPointInPath() Returns true if the particular point is in the current path, otherwise false

Transformations:

Method Description
scale() Scales the current drawing bigger or smaller
rotate() Moves the current drawing
translate() Remaps the (0,0) position on the canvas
transform() Replaces the current transformation matrix for the drawing
setTransform() Resets the current transform to the identity matrix. Then runs transform()

Text:

Property Description
font Sets the current font properties for text content
textAlign Returns the current alignment for text content
textBaseline Sets the current text baseline used when drawing text
Method Description
fillText() Draws "filled" text on the canvas
strokeText() Draws text on the canvas with no fill
measureText() Returns an object that have the width of the specified text

Image Drawing:

Method Description
drawImage() An image, canvas, or video onto the canvas will be drawn.

Pixel Manipulation:

Property Description
width Returns the ImageData object width
height Returns the ImageData object height
data Returns an object that have image data of a particular ImageData object
Method Description
createImageData() Creates a new, blank ImageData object
getImageData() Returns an ImageData object that duplicates the pixel data for the specified rectangle on a canvas
putImageData() Puts the image data from a specified ImageData object back onto the canvas

Compositing:

Property Description
globalAlpha Sets the current alpha or transparency value of the drawing
globalCompositeOperation Returns how a new image are drawn onto an existing image

Other:

Method Description
save() Saves the state of the current context
restore() Returns past saved path state and attributes
getContext() Sets an object which provides methods and properties for drawing on the canvas.
toDataURL() -
createEvent() -

Browser Support for HTML5 Canvas:

4.0 9.0 2.0 3.1 9.0

Related Searches to introduction to HTML5 Canvas