HTML Canvas Reference

Complete Canvas API reference for drawing graphics with JavaScript

Quick Answer

What is HTML Canvas?

HTML Canvas is a powerful API for drawing 2D graphics using JavaScript. It provides methods for drawing shapes (rect(), arc()), paths (moveTo(), lineTo()), text (fillText()), and images (drawImage()). Canvas is perfect for creating games, data visualizations, animations, and interactive graphics.

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