CanvasRenderingContext2D

Class to render a 2D canvas.

arc(x, y, radius, start, end[, ccw=f])

Create an arc.

Arguments:
x (Float)

X position

y (Float)

Y position

radius (Float)

Radius

start (Float)

Start Angle

end (Float)

End Angle

ccw (Boolean)

cww

arcTo(x1, y1, x2, y2, radius)

Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.

Arguments:
x1 (Integer)

X1 position

y1 (Integer)

Y1 position

x2 (Integer)

X2 position

y2 (Integer)

Y2 position

radius (Float)

Radius

attachFragmentShader(glsl)

Attach a shader.

Arguments:
glsl (String)

GL shader

Returns: CanvasGLProgram

Program instance

beginPath()

Begin a path.

bezierCurveTo(cx1, cy1, cx2, cy2, x, y)

Set the next coordinate for a bezier curve on a path.

Arguments:
cx1 (Float)

cX1position

cy1 (Float)

cY1position

cx2 (Float)

cX2position

cy2 (Float)

cY2 position

x (Float)

X position

y (Float)

Y position

breakText(text, maxWidth)

Wrap text over multiple lines based on a maximum width.

Arguments:
text (String)

Text string

maxWidth (Float)

The maximal width where the text should fit in

Returns: Object

Dimensions

  • height (Float): The height of the surrounding box
  • lines (String): The wrapped text lines

clearRect(x, y, width, height)

Clear a rectangle.

Arguments:
x (Float)

X position

y (Float)

Y position

width (Float)

Width

height (Float)

Height

clip()

Clip a region of any shape or size.

closePath()

Close the path.

createImageData(x, y)

Create a new blank ImageData.

Arguments:
x (Integer)

X Position

y (Integer)

Y Position

Returns: ImageData

ImageData instance

createLinearGradient(x1, y1, x2, y2)

Create a linear gradient.

Arguments:
x1 (Float)

X1 value

y1 (Float)

Y1 value

x2 (Float)

X2 value

y2 (Float)

Y2 value

Returns: CanvasGradient

Gradient instance

createPattern(image, mode=r)

Create a pattern.

The pattern-mode can be any of : repeat,no-repeat,repeat-x,repeat-y,repeat-mirror.

Arguments:
image (Image)

Image object

mode (String)

Pattern mode

Returns: CanvasPattern

CanvasPattern instance

createRadialGradient(x1, y1, r1, x2, y2, r2)

Create a radial gradient.

Arguments:
x1 (Float)

X1 value

y1 (Float)

Y1 value

r1 (Float)

R1 value

x2 (Float)

X2 value

y2 (Float)

Y2 value

r2 (Float)

R2 value

Returns: CanvasGradient

Gradient instance

detachFragmentShader()

Detach a fragment shader.

drawImage(image, x, y[, width][, height])

Draw an Image.

Arguments:
image (Image)

Image object

x (Integer)

X Position

y (Integer)

Y Position

width (Integer)

Width

height (Integer)

Height

fill()

Fill a path.

fillRect(x1, y1, width, height[, rx][, ry])

Fill a rectangle.

Arguments:
x1 (Float)

X1 position

y1 (Float)

Y1 position

width (Float)

width

height (Float)

height

rx (Float)

Radius X

ry (Float)

radius Y

fillText(text, x, y, maxWidth)

Put text in a textbox.

Arguments:
text (String)

Text string

x (Integer)

X position

y (Integer)

Y position

maxWidth (Integer)

Maximum width where the text must fit in.

getImageData(left, top, width, height)

Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas.

Arguments:
left (Integer)

Left

top (Integer)

Top

width (Integer)

Width

height (Integer)

Height

Returns: ImageData

ImageData instance

getPathBounds()

Get the outer bounds of a path.

Returns: Object

dimensions

  • left (Float): left size
  • right (Float): right size
  • top (Float): top size
  • bottom (Float): bottom size

iTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)

Transform a drawing.

Arguments:
scaleX (Float)

Scale X

skewX (Float)

Skew X

skewY (Float)

Skew Y

scaleY (Float)

Scale Y

translateX (Float)

Translate X

translateY (Float)

Translate Y

isPointPath(x, y)

Determine if the path consists out of points.

Arguments:
x (Float)

X position

y (Float)

Y position

Returns: Boolean

is it a point path

lineTo(x, y)

Adds a new point to a line.

The line created is from the last specified point to that point.

Arguments:
x (Float)

X position

y (Float)

Y position

measureText(text)

Determine the size of text.

Arguments:
text (String)

Text string

Returns: Object

dimensions

  • width (Float): the width of the bounding box

moveTo(x, y)

Set the next coordinate on a path.

Arguments:
x (Float)

X position

y (Float)

Y position

putImageData(image, width, height)

Puts the image data (from a specified ImageData object) back onto the canvas.

Arguments:
image (ImageData)

Image

width (Integer)

Width

height (Integer)

Height

quadraticCurveTo(cx, cy, x, y)

Set the next coordinate for a quadratic curve on a path.

Arguments:
cx (Float)

cX position

cy (Float)

cY position

x (Float)

X position

y (Float)

Y position

rect(x, y, width, height)

Create a rectangle.

Arguments:
x (Float)

X position

y (Float)

Y position

width (Float)

Width

height (Float)

Height

restore()

Restore a drawing.

rotate(angle)

Rotate the current drawing.

Arguments:
angle (Float)

Angle

save()

Save a drawing.

scale(x, y)

Scale the current drawing.

Arguments:
x (Float)

X Position

y (Float)

Y Position

setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)

Set the transform of a drawing.

Arguments:
scaleX (Float)

Scale X

skewX (Float)

Skew X

skewY (Float)

Skew Y

scaleY (Float)

Scale Y

translateX (Float)

Translate X

translateY (Float)

Translate Y

setVertexOffset(vertex, x, y)

Set a vertexOffset.

Arguments:
vertex (Integer)

Vertex

x (Float)

X y2yPosition

y (Float)

Y Position

strokRect(x, y, width, height, rx, ry)

draw a rectangle.

Arguments:
x (Float)

X position

y (Float)

Y position

width (Float)

Width

height (Float)

Height

rx (Float)

Radius x

ry (Float)

Radius y

stroke()

Actually draw a path.

strokeText(text, x, y, maxWidth)

Stroke text.

Arguments:
text (String)

Text string

x (Integer)

X position

y (Integer)

Y position

maxWidth (Integer)

Maximum width where the text must fit in.

transform(scaleX, skewX, skewY, scaleY, translateX, translateY[, rotate])

Transform the current drawing.

Arguments:
scaleX (Float)

Scale X

skewX (Float)

Skew X

skewY (Float)

Skew Y

scaleY (Float)

Scale Y

translateX (Float)

Translate X

translateY (Float)

Translate Y

rotate (Float)

Rotate angle

translate(x, y)

Translate the current drawing.

Arguments:
x (Float)

X Position

y (Float)

Y Position

fillStyle

  • Type: String | CanvasGradient

Get or set the fillStyle.

fontFamily

  • Type: String

Get or set the fontFamily.

fontFile

  • Type: String

Get or set the fontFile.

fontSize

  • Type: Float

Get or set the fontSize.

fontSkew

  • Type: Float

Get or set the fontSkew.

fontStyle

  • Type: String

Get or set the fontStyle.

globalAlpha

  • Type: Float

Get or set the globalAlpha.

globalCompositionOperation

  • Type: String

Get or set the globalCompositionOperation.

height

  • Type: Integer

Get or set the height.

imageSmoothingEnabled

  • Type: Boolean

Get or set the imageSmooting flag.

lineCap

  • Type: String

Get or set the lineCap.

lineJoin

  • Type: String

Get or set the lineJoin.

lineWidth

  • Type: Float

Get or set the lineWidth.

miterLimit

  • Type: Float

Get or set the miter limit.

shadowBlur

  • Type: Float

Get or set the shadowBlur.

shadowColor

  • Type: String

Get or set the shadowColor.

shadowOffsetX

  • Type: Float

Get or set the shadowOffsetX.

shadowOffsetY

  • Type: Float

Get or set the shadowOffsetY.

textAlign

  • Type: String

Get or set the textAlign.

textBaseline

  • Type: String

Get or set the textBaseline.

width

  • Type: Integer

Get or set the width.


Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!