HTML Canvas Reference

❮ Previous Reference Next ❯

Properties

Property Description Category
fillStyle This canvas property sets or returns the color, gradient, or pattern used to fill the drawing. Style
strokeStyle This canvas property sets or returns the color, gradient, or pattern used for strokes. Style
shadowColor This canvas property sets or returns the color to use for shadows. Shadow
shadowBlur This canvas property sets or returns the blur level for shadows. Shadow
shadowOffsetX This canvas property sets or returns the horizontal distance of the shadow from the shape. Shadow
shadowOffsetY This canvas property sets or returns the vertical distance of the shadow from the shape. Shadow
lineCap This canvas property sets or returns the style of the end caps for a line. Line Styles
lineJoin This canvas property sets or returns the type of corner created, when two lines meet. Line Styles
lineWidth This canvas property sets or returns the current line width. Line Styles
miterLimit This canvas property sets or returns the maximum miter length. Line Styles
font This canvas property sets or returns the current font properties for text content. Text
textAlign This canvas property sets or returns the current alignment for text content. Text
textBaseline This canvas property sets or returns the current text baseline used when drawing text. Text
width This canvas property returns the width of an ImageData object. Pixel Manipulation
height This canvas property returns the height of an ImageData object. Pixel Manipulation
data This canvas property returns an object that contains image data of a specified ImageData object. Pixel Manipulation
globalAlpha This canvas property sets or returns the current alpha or transparency value of the drawing. Compositing
globalCompositeOperation This canvas property sets or returns how a new image is drawn onto an existing image. Compositing

Methods

Method Description Category
createLinearGradient() This method creates a linear gradient (to use on canvas content). Color
createPattern() This method repeats a specified element in the specified direction. Style
createRadialGradient() This method creates a radial/circular gradient (to use on canvas content). Color
addColorStop() This method specifies the colors and stop positions in a gradient object. Color
rect() This method creates a rectangle. Rectangles
fillRect() This method draws a "filled" rectangle. Rectangles
strokeRect() This method draws a rectangle (no fill). Rectangles
clearRect() This method clears the specified pixels within a given rectangle. Rectangles
fill() This method fills the current drawing (path). Paths
stroke() This method draws the path you have defined. Paths
beginPath() This method begins a path, or resets the current path. Paths
moveTo() This method moves the path to the specified point in the canvas, without creating a line. Paths
closePath() This method creates a path from the current point back to the starting point. Paths
lineTo() This method adds a new point and creates a line to that point from the last specified point in the canvas. Paths
clip() This method clips a region of any shape and size from the original canvas. Paths
quadraticCurveTo() This method creates a quadratic Bézier curve. Paths
bezierCurveTo() This method creates a cubic Bézier curve. Paths
arc() This method creates an arc/curve used to create circles, or parts of circles. Paths
arcTo() This method creates an arc/curve between two tangents. Paths
isPointInPath() This method returns true if the specified point is in the current path, otherwise false. Paths
scale() This method scales the current drawing bigger or smaller. Transformations
rotate() This method rotates the current drawing. Transformations
translate() This method remaps the (0,0) position on the canvas. Transformations
transform() This method replaces the current transformation matrix for the drawing. Transformations
setTransform() This method resets the current transform to the identity matrix. Transformations
fillText() This method draws "filled" text on the canvas. Text
strokeText() This method draws text on the canvas (no fill). Text
measureText() This method returns an object that contains the width of the specified text. Text
drawImage() This method draws an image, canvas, or video onto the canvas. Image Drawing
createImageData() This method creates a new, blank ImageData object. Pixel Manipulation
getImageData() This method returns an ImageData object that copies the pixel data for the specified rectangle on a canvas. Pixel Manipulation
putImageData() This method puts the image data back onto the canvas. Pixel Manipulation
❮ Previous Reference Next ❯