HTML Canvas Reference

Complete Canvas API reference for drawing graphics with JavaScript

Interactive Canvas Demo

Drawing Methods

Method Description
fillRect(x, y, w, h) Draws a filled rectangle
strokeRect(x, y, w, h) Draws a rectangular outline
clearRect(x, y, w, h) Clears the specified rectangular area
fill() Fills the current path
stroke() Draws the current path
beginPath() Begins a new path
closePath() Closes the current path
moveTo(x, y) Moves the path to the specified point
lineTo(x, y) Adds a line to the path
arc(x, y, r, sAngle, eAngle) Creates an arc/curve
arcTo(x1, y1, x2, y2, r) Creates an arc between two tangents
quadraticCurveTo(cpx, cpy, x, y) Creates a quadratic Bézier curve
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Creates a cubic Bézier curve

Text Methods

Method/Property Description
fillText(text, x, y) Draws filled text
strokeText(text, x, y) Draws text with outline
measureText(text) Returns an object containing the width of the specified text
font Sets or returns the current font properties
textAlign Sets or returns text alignment (start, end, center, left, right)
textBaseline Sets or returns text baseline (top, hanging, middle, alphabetic, ideographic, bottom)

Image Methods

Method Description
drawImage(img, x, y) Draws an image on the canvas
drawImage(img, x, y, w, h) Draws an image with specified width and height
createImageData(w, h) Creates a new, blank ImageData object
getImageData(x, y, w, h) Returns an ImageData object that copies pixel data
putImageData(imgData, x, y) Puts the image data back onto the canvas

Style Properties

Property Description
fillStyle Sets or returns the color, gradient, or pattern used to fill
strokeStyle Sets or returns the color, gradient, or pattern for strokes
shadowColor Sets or returns the color for shadows
shadowBlur Sets or returns the blur level for shadows
shadowOffsetX Sets or returns the horizontal distance of shadow from shape
shadowOffsetY Sets or returns the vertical distance of shadow from shape
lineWidth Sets or returns the current line width
lineCap Sets or returns the line cap style (butt, round, square)
lineJoin Sets or returns the line join style (bevel, round, miter)
globalAlpha Sets or returns the current global alpha (transparency) value
globalCompositeOperation Sets or returns how new images are drawn onto existing images

Transformation Methods

Method Description
scale(x, y) Scales the current drawing
rotate(angle) Rotates the current drawing
translate(x, y) Remaps the (0,0) position on the canvas
transform(a, b, c, d, e, f) Replaces the current transformation matrix
setTransform(a, b, c, d, e, f) Resets and creates a new transformation matrix