HTML JavaScript Web development

HTML Canvas Reference

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (JavaScript).

Style, Colors, Shadows:

fillStyledefines the color, gradient, or pattern used to fill the drawing.
strokeStyledefines the color, gradient, or pattern used for strokes.
shadowColorsets or returns the color to use for shadows.
shadowBlursets or returns the blur level for shadows.
shadowOffsetXsets or returns the horizontal distance of the shadow from the shape.
shadowOffsetYsets or returns the vertical distance of the shadow from the shape.


createLinearGradient()creates a linear gradient.
createRadialGradient()creates a radial gradient.
addColorStop()defines the colors and position in a gradient object.
createPattern()defines the specified element in the specified direction.

Line Styles:

lineCapsets or returns the style of the end caps for a line.
lineJoinsets or returns the type of corner created, when two lines meet.
lineWidthsets or returns the current line width (px).
miterLimitsets or returns the maximum miter length.


rect()draws a rectangle.
fillRect()creates a “filled” rectangle.
strokeRect()creates a rectangle (no fill).
clearRect()clears the defined pixels within a given rectangle.



fill()fills the current path.
stroke()draws the path.
beginPath()begins a path.
moveTo()moves the path to the specified point in the canvas.
closePath()draws 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 last specified point in the canvas.
clip()clips any shape and size from the original canvas.
quadraticCurveTo()draws a quadratic Bézier curve.
bezierCurveTo()draws a cubic Bézier curve.
arc()creates an arc/curve/circle.
arcTo()creates an arc/curve between two tangents.
isPointInPath()returns true if the specified point is in the current path, otherwise false.


scale()scales the current drawing (smaller/bigger).
rotate()rotates the current drawing.
translate()remaps the (0,0) position on the canvas.
transform()scale, rotate, move, and skew the current context.
setTransform()resets the current transform to the identity matrix, and then runs transform().


fontsets the current font properties for text content on the canvas.
textAlignsets the current alignment for text content.
textBaselinesets or returns the current text baseline used when drawing text.


fillText()draws filled text on the canvas.
strokeText()draws text (no fill) on the canvas.
measureText()returns an object that contains the width of the specified text.

Image Drawing:

drawImage()creates an image, canvas, or video onto the canvas.


globalAlphasets the current alpha or transparency value of the drawing.
globalCompositeOperationsets how a source (new) image is drawn into a destination (existing) image.