HTML Canvas

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