JavaScripture
Contribute via GitHub Feedback

JavaScript CanvasRenderingContext2D : CanvasRenderingContext

The CanvasRenderingContext2D is an object that is used to issue 2D drawing commands to a canvas. It is obtained by passing '2d' to the HTMLCanvasElement.getContext() method.

Instance Properties

canvas : HTMLCanvasElement  

The canvas that owns this context.

Example:

Run

Results:

 

fillStyle : Object

The brush used to fill the area of shapes. Must be a css color String (such as 'black' or '#000'), a CanvasGradient, or a CanvasPattern.

Example:

Run

Results:

 

font : String

The css string describing the font used to draw text. Defaults to '10px sans-serif'.

Example:

Run

Results:

 

globalAlpha : Number

The alpha to use for subsequent paint operations. Must be between 0 and 1. Defaults to 1.

Example:

Run

Results:

 

globalCompositeOperation : String

Determines how subsequent paint operations combine with the back buffer. Must be one of the following (source refers to the current drawing operation and destination refers to the existing contents of the canvas):

ValueOperation
'source-over' Draw the source on the canvas normally.
'source-in' Keep the source where the destination is opaque.
'source-out' Keep the source where the destination is transparent.
'source-atop' Draw the source on the destination but only keep pixels that were opaque in the destination.
'destination-over' Draw the source under the destination.
'destination-in' Keep the destination where the source is opaque.
'destination-out' Keep the destination where the source is transparent.
'destination-atop' Draw the destination on the source but only keep pixels that were opaque in the source.
'lighter' Increase the brightness of pixels under the source.
'copy' Keep only the source.
'xor' Exclusive OR of the source and destination.

Defaults to 'source-over'.

Example:

Run

Results:

 

lineCap : String

Determines the shape of line endings. Must be one of 'butt', 'round', or 'square'. Defaults to 'butt'.

Example:

Run

Results:

 

lineJoin : String

Determines how lines meet. Must be one of 'miter', 'round', or 'bevel'. Defaults to 'miter'.

Example:

Run

Results:

 

lineWidth : Number

The width of the stroke. Defaults to 1.

Example:

Run

Results:

 

miterLimit : Number

Adjusts the maximum distance the miter point can extend from the joint.

Example:

Run

Results:

 

shadowBlur : Number

Describes how big the shadow blur is. Larger numbers are blurrier. Defaults to 0.

Example:

Run

Results:

 

shadowColor : String

The css color string of the shadow. Defaults to transparent.

Example:

Run

Results:

 

shadowOffsetX : Number

Determines the x offset of the shadow from the drawn shape.

Example:

Run

Results:

 

shadowOffsetY : Number

Determines the y offset of the shadow from the drawn shape.

Example:

Run

Results:

 

strokeStyle : Object

The brush used to fill the stroke of shapes. Must be a css color String (such as 'black' or '#000'), a CanvasGradient, or a CanvasPattern.

Example:

Run

Results:

 

textAlign : String

Determines which edge of the text to place at the x coordinate passed to fillText or strokeText. Must be one of 'start', 'end', 'left', 'right', 'center'. Defaults to 'start'.

Example:

Run

Results:

 

textBaseline : String

Determines which edge of the text to place at the y coordinate passed to fillText or strokeText. Must be one of 'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'. Defaults to 'alphabetic'.

Example:

Run

Results:

 

Instance Methods

arc(x : Number, y : Number, radius : Number, startAngle : Number, endAngle : Number, [counterclockwise = false : Boolean]) : undefined

Continues the current path by creating an arc of circle centered at x, y of radius radius from startAngle to endAngle. The angles are specified in radians where 0 points to the right, Math.PI / 2 points down, Math.PI points to the left, etc. The counterclockwise parameter determines which part of the circle is used for the path.

Example:

Run

Results:

 

arcTo(controlX : Number, controlY : Number, endX : Number, endY : Number, radius : Number) : undefined

Draws 2 imaginary lines between the previous point and the control point and between the control point and the end point. arcTo fits a circle of the specified radius between these lines. The drawn figure is a line from the previous point to the place where the circle touches the first imaginary line and an arc along the circle to the point where it touches the second imaginary line. This method will not draw all the way to the end point (unless the end point matches the spot where the circle touches the secondary imaginary line).

Example:

Run

Results:

 

beginPath() : undefined

Begins a path. Use with moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arc(), arcTo(), and closePath() to define the shape of the path. Draw the path with fill() or stroke().

Example:

Run

Results:

 

bezierCurveTo(cp1x : Number, cp1y : Number, cp2x : Number, cp2y : Number, x : Number, y : Number) : undefined

Draw a bezier curve from the current point to x, y using cp1x, cp1y and cp2x, cp2y as control points. The curve generally does not pass through the control points.

Example:

Run

Results:

 

clearRect(x : Number, y : Number, w : Number, h : Number) : undefined

Clears a rectangular portion of the canvas to transparent.

Example:

Run

Results:

 

clip() : undefined

Replaces the current clip region with the intersection of the current path and the current clip region. Use save() and restore() to save and restore clip regions.

Example:

Run

Results:

 

closePath() : undefined

Joins the last line segment to the beginning of the path.

Example:

Run

Results:

 

createImageData 2 variants
createImageData(imageData : ImageData) : ImageData

Creates a buffer of the same size as imageData that can be filled with pixel data and later copied into the canvas using putImageData(). The buffer is initialized to transparent. See also getImageData() and putImageData().

Example:

Run

Results:

 

createImageData(sw : Number, sh : Number) : ImageData

Creates a buffer of size sw by sh that can be filled with pixel data and later copied into the canvas using putImageData(). The buffer is initialized to transparent. See also getImageData() and putImageData().

Example:

Run

Results:

 

createLinearGradient(x0 : Number, y0 : Number, x1 : Number, y1 : Number) : CanvasGradient

Creates a linear gradient from x0, y0 to x1, y1.

Example:

Run

Results:

 

createPattern(image : HTMLImageElement, repetition : String) : CanvasPattern

Creates a pattern for the specified image. image can be either a HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement. repetition must be one of 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'.

Example:

Run

Results:

 

createRadialGradient(x0 : Number, y0 : Number, r0 : Number, x1 : Number, y1 : Number, r1 : Number) : CanvasGradient

Creates a radial gradient from the circle at x0, y0 with radius r0 to the circle at x1, y1 with radius r1.

Example:

Run

Results:

 

drawImage 3 variants
drawImage(image : HTMLImageElement, dx : Number, dy : Number) : undefined

Draws image to the canvas at dx, dy using the natural size of the image. image can be either an HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement.

Example:

Run

Results:

 

drawImage(image : HTMLImageElement, dx : Number, dy : Number, dw : Number, dh : Number) : undefined

Draws image to the canvas at dx, dy of size dw by dh. image can be either an HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement.

Example:

Run

Results:

 

drawImage(image : HTMLImageElement, sx : Number, sy : Number, sw : Number, sh : Number, dx : Number, dy : Number, dw : Number, dh : Number) : undefined

Draws the subregion of image starting at sx, sy of size sw by sh into the subregion of the canvas at dx, dy of size dw by dh. The image will be stretched and scaled if sw, sh does not match dw by dh. image can be either an HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement.

Example:

Run

Results:

 

fill() : undefined

Fills the current path with the current fillStyle.

Example:

Run

Results:

 

fillRect(x : Number, y : Number, w : Number, h : Number) : undefined

Fills a rectangle with the fillStyle.

Example:

Run

Results:

 

fillText(text : String, x : Number, y : Number, [maxWidth : Number]) : undefined

Draws the specified string at x and y using fillStyle, font, textAlign, and textBaseline.

Example:

Run

Results:

 

getImageData(sx : Number, sy : Number, sw : Number, sh : Number) : ImageData

Retrieves the contents of the canvas starting at sx, sy of size sw by sh. See also createImageData() and putImageData().

Example:

Run

Results:

 

isPointInPath(x : Number, y : Number) : Boolean

Returns true if the specified location is in the current path (from the most recent call to beginPath()).

Example:

Run

Results:

 

lineTo(x : Number, y : Number) : undefined

Draw a line from current point of the current path to x, y.

Example:

Run

Results:

 

measureText(text : String) : TextMetrics

Retrieves information about the rendered size of text.

Example:

Run

Results:

 

moveTo(x : Number, y : Number) : undefined

Move current point of the current path to x, y without connecting the stroke.

Example:

Run

Results:

 

putImageData(imageData : ImageData, dx : Number, dy : Number, [dirtyX : Number, dirtyY : Number, dirtyWidth : Number, dirtyHeight : Number]) : undefined

Copies the contents of imageData into the canvas at dx, dy. If the dirty parameters are specified, only that region of the imageData is copied. See also createImageData() and getImageData().

Example:

Run

Results:

 

quadraticCurveTo(cpx : Number, cpy : Number, x : Number, y : Number) : undefined

Draw a quadratic curve from the current point to x, y using cpx, cpy as a control point. The curve generally does not pass through the control point.

Example:

Run

Results:

 

rect(x : Number, y : Number, w : Number, h : Number) : undefined

Add a closed rectangle to the current path.

Example:

Run

Results:

 

restore() : undefined

Restores the state from the the previous save() call.

Example:

Run

Results:

 

rotate(angle : Number) : undefined

Applies a rotation transform to the current transform so subsequent drawing operations are rotated by angle radians. Positive angles are clockwise.

Example:

Run

Results:

 

save() : undefined

Saves the current state of the this onto the stack. Call restore() to restore the saved state. The saved state consists of: transformation matrix, clip region, fillStyle, font, globalAlpha, globalCompositeOperation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, and textBaseline.

Example:

Run

Results:

 

scale(x : Number, y : Number) : undefined

Applies a scale transform to the current transform so subsequent drawing operations are scale by x, y.

Example:

Run

Results:

 

setTransform(a : Number, b : Number, c : Number, d : Number, e : Number, f : Number) : undefined

Replaces the current transform with following matrix:

ace
bdf
001

Example:

Run

Results:

 

stroke() : undefined

Draws a line around the current path with the current strokeStyle and lineWidth.

Example:

Run

Results:

 

strokeRect(x : Number, y : Number, w : Number, h : Number) : undefined

Draws a rectangular path with the current strokeStyle and lineWidth.

Example:

Run

Results:

 

strokeText(text : String, x : Number, y : Number, [maxWidth : Number]) : undefined

Draws an outline of the specified string at x and y using strokeStyle, lineWidth, font, textAlign, and textBaseline.

Example:

Run

Results:

 

transform(a : Number, b : Number, c : Number, d : Number, e : Number, f : Number) : undefined

Applies the following transform to the current transform.

ace
bdf
001

Example:

Run

Results:

 

translate(x : Number, y : Number) : undefined

Applies a translate transform to the current transform so subsequent drawing operations are shifted by x, y.

Example:

Run

Results: