HTML Canvas Reference

PreviousNext

HTML Canvas Reference

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

To learn more about <canvas>, please read our HTML Canvas tutorial.

Colors, Styles, and Shadows

PropertyDescriptionfillStyleSets or returns the color, gradient, or pattern used to fill the drawingstrokeStyleSets or returns the color, gradient, or pattern used for strokesshadowColorSets or returns the color to use for shadowsshadowBlurSets or returns the blur level for shadowsshadowOffsetXSets or returns the horizontal distance of the shadow from the shapeshadowOffsetYSets or returns the vertical distance of the shadow from the shapeMethodDescriptioncreateLinearGradient()Creates a linear gradient (to use on canvas content)createPattern()Repeats a specified element in the specified directioncreateRadialGradient()Creates a radial/circular gradient (to use on canvas content)addColorStop()Specifies the colors and stop positions in a gradient object

Line Styles

PropertyDescriptionlineCapSets or returns the style of the end caps for a linelineJoinSets or returns the type of corner created, when two lines meetlineWidthSets or returns the current line widthmiterLimitSets or returns the maximum miter length

ADVERTISEMENT

Rectangles

MethodDescriptionrect()Creates a rectanglefillRect()Draws a "filled" rectanglestrokeRect()Draws a rectangle (no fill)clearRect()Clears the specified pixels within a given rectangle

Paths

MethodDescriptionfill()Fills the current drawing (path)stroke()Actually draws the path you have definedbeginPath()Begins a path, or resets the current pathmoveTo()Moves the path to the specified point in the canvas, without creating a lineclosePath()Creates a path from the current point back to the starting pointlineTo()Adds a new point and creates a line to that point from the last specified point in the canvasclip()Clips a region of any shape and size from the original canvasquadraticCurveTo()Creates a quadratic Bézier curvebezierCurveTo()Creates a cubic Bézier curvearc()Creates an arc/curve (used to create circles, or parts of circles)arcTo()Creates an arc/curve between two tangentsisPointInPath()Returns true if the specified point is in the current path, otherwise false

Transformations

MethodDescriptionscale()Scales the current drawing bigger or smallerrotate()Rotates the current drawingtranslate()Remaps the (0,0) position on the canvastransform()Replaces the current transformation matrix for the drawingsetTransform()Resets the current transform to the identity matrix. Then runs transform()

Text

PropertyDescriptionfontSets or returns the current font properties for text contenttextAlignSets or returns the current alignment for text contenttextBaselineSets or returns the current text baseline used when drawing textMethodDescriptionfillText()Draws "filled" text on the canvasstrokeText()Draws text on the canvas (no fill)measureText()Returns an object that contains the width of the specified text

Image Drawing

MethodDescriptiondrawImage()Draws an image, canvas, or video onto the canvas

Pixel Manipulation

PropertyDescriptionwidthReturns the width of an ImageData objectheightReturns the height of an ImageData objectdataReturns an object that contains image data of a specified ImageData objectMethodDescriptioncreateImageData()Creates a new, blank ImageData objectgetImageData()Returns an ImageData object that copies the pixel data for the specified rectangle on a canvasputImageData()Puts the image data (from a specified ImageData object) back onto the canvas

Compositing

PropertyDescriptionglobalAlphaSets or returns the current alpha or transparency value of the drawingglobalCompositeOperationSets or returns how a new image is drawn onto an existing image

Other

MethodDescriptionsave()Saves the state of the current contextrestore()Returns previously saved path state and attributescreateEvent()
getContext()
toDataURL()