Skip to main content

canvas - Canvas

老猫10/22/22About 7 min

The canvas module provides 2D drawing on a canvas. It can be used for simple mini-games or image editing. With canvas, you can easily draw lines and shapes onto an image or a UI.

Tips

The Canvas module is essentially a wrapper around Android Canvas. Some behaviors and documentation may be missing here, but you can find them in the Android docs. See Android Canvas, Android Paint, and Android Path for details.

The canvas coordinate system is a 2D Cartesian coordinate system. The origin is at the top-left corner of the view; the X axis points right along the top edge, and the Y axis points down along the left edge. For example, on a 1920×1080 screen where the canvas view covers the whole screen, draw a line from top-left to bottom-right:

canvas.drawLine(0, 0, 1080, 1920, paint);

Canvas drawing relies on a Paint. By setting stroke width, color, fill style, etc., you can change how shapes are rendered. Example: draw a solid red square:

let paint = new Paint();
// Fill style: shapes are solid
paint.setStyle(Paint.Style.FILL);
// Red color
paint.setColor(colors.RED);
// Draw a square from (0, 0) to (100, 100)
canvas.drawRect(0, 0, 100, 100, paint);

To draw only the square outline, set the paint style to stroke:

let paint = new Paint();
// Stroke style: shapes are outlines
paint.setStyle(Paint.Style.STROKE);
// Red color
paint.setColor(colors.RED);
// Draw a square from (0, 0) to (100, 100)
canvas.drawRect(0, 0, 100, 100, paint);

With Paint, canvas can draw basic shapes, images, and more.

Common Methods Index

Draw colors:

Draw paint:

Draw shapes:

Draw text:

Draw images:

Canvas size:

Transforms:

canvas.getWidth()

  • Returns {number}

Returns the width of the current canvas layer.

canvas.getHeight()

  • Returns {number}

Returns the height of the current canvas layer.

canvas.drawRGB(r, g, b)

  • r {number} Red channel value
  • g {number} Green channel value
  • b {number} Blue channel value

Fill the entire drawable area with the color specified by r, g, b. Equivalent to canvas.drawColor(colors.rgb(r, g, b)).

canvas.drawARGB(a, r, g, b)

  • a {number} Alpha channel value
  • r {number} Red channel value
  • g {number} Green channel value
  • b {number} Blue channel value

Fill the entire drawable area with the color specified by a, r, g, b. Equivalent to canvas.drawColor(colors.argb(a, r, g, b)).

canvas.drawColor(color)

  • color {number} Color value

Fill the entire drawable area with the color specified by color.

canvas.drawColor(color, mode)

  • color {number} Color value
  • mode {PorterDuff.Mode} Blend mode

Fill the entire drawable area with color using the blend mode.

canvas.drawPaint(paint)

  • paint {Paint} Paint

Fill the entire drawable area with the specified paint. This is equivalent to drawing an infinitely large rectangle, but faster. You can use this to draw patterns using a shader.

canvas.drawPoint(x, y, paint)

  • x {number} X coordinate
  • y {number} Y coordinate
  • paint {Paint} Paint

Draw a point at (x, y) in the drawable area.

The point shape is determined by the paint stroke cap (see paint.setStrokeCap(cap)). The point size is determined by the paint stroke width (see paint.setStrokeWidth(width)).

If the paint stroke width is 0, it still draws 1 pixel (up to 4 pixels if anti-aliasing is enabled).

Equivalent to canvas.drawPoints([x, y], paint).

canvas.drawPoints(pts, paint)

  • pts {number[]} Point coordinate array: [x0, y0, x1, y1, x2, y2, ...]
  • paint {Paint} Paint

Draw multiple points specified by the coordinate array.

canvas.drawLine(startX, startY, stopX, stopY, paint)

  • startX {number} Start X
  • startY {number} Start Y
  • endX {number} End X
  • endY {number} End Y
  • paint {Paint} Paint

Draw a line from (startX, startY) to (endX, endY). The paint Style is ignored when drawing lines. That is, even if the style is set to “FILL”, a line is still drawn.

A line that degenerates into a point (length 0) will not be drawn.

canvas.drawLines(pts, paint)

  • pts {number[]} Point coordinate array: [x0, y0, x1, y1, x2, y2, ...]
  • paint {Paint} Paint

Draw a series of lines by connecting points in pairs from the coordinate array.

Each line uses 4 consecutive values in the array, so to draw one line the array must contain at least 4 values. Equivalent to canvas.drawLine(pts[0], pts[1], pts[2], pts[3], paint) then canvas.drawLine(pts[4], pts[5], pts[6], pts[7], paint), and so on.

The paint Style is ignored when drawing lines. That is, even if the style is set to “FILL”, lines are still drawn.

canvas.drawRect(r, paint)

  • r {Rect|RectF} Rectangle bounds
  • paint {Paint} Paint

Draw a rectangle specified by bounds r. The paint Style determines whether the rectangle is stroked, filled, or both.

Equivalent to canvas.drawRect(r.left, r.top, r.right, r.bottom, paint).

canvas.drawRect(left, top, right, bottom, paint)

  • left {number} Left X
  • top {number} Top Y
  • right {number} Right X
  • bottom {number} Bottom Y
  • paint {Paint} Paint

Draw a rectangle defined by (left, top) - (right, bottom). The paint Style determines whether the rectangle is stroked, filled, or both.

canvas.drawOval(oval, paint)

  • oval {RectF} Bounds of the oval's bounding rectangle
  • paint {Paint} Paint

Draw an oval specified by bounds oval. The paint Style determines whether the oval is stroked, filled, or both.

Equivalent to canvas.drawOval(oval.left, oval.top, oval.right, oval.bottom, paint).

canvas.drawOval(left, top, right, bottom, paint)

  • left {number} Left X of the oval bounds
  • top {number} Top Y of the oval bounds
  • right {number} Right X of the oval bounds
  • bottom {number} Bottom Y of the oval bounds
  • paint {Paint} Paint

Draw an oval defined by (left, top) - (right, bottom). The paint Style determines whether the oval is stroked, filled, or both.

canvas.drawCircle(cx, cy, radius, paint)

  • cx {number} Center X
  • cy {number} Center Y
  • radius {number} Radius
  • paint {Paint} Paint

Draw a circle with center (cx, cy) and radius radius. If radius is less than or equal to 0, nothing is drawn. The paint Style determines whether the circle is stroked, filled, or both.

canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint)

  • oval {RectF} Bounds of the oval used for the arc
  • startAngle {number} Start angle (degrees)
  • sweepAngle {number} Sweep angle (clockwise, degrees)
  • useCenter {boolean} Whether to connect the arc to the oval center
  • paint {Paint} Paint

Draw an arc in the drawable area. The arc is a part of the oval specified by oval, starting at startAngle and sweeping clockwise by sweepAngle.

If startAngle is negative or (\ge 360), it is taken modulo 360. Arcs are drawn clockwise. A start angle of 0° corresponds to the 3 o'clock direction.

If sweepAngle is (\ge 360), this draws a full oval. Note this differs from path.arcTo, which takes the sweep modulo 360. If sweepAngle is negative, it is taken modulo 360.

If useCenter is true, the arc will be connected to the oval center when stroking/filling, producing a sector.

Equivalent to canvas.drawArc(oval.left, oval.top, oval.right, oval.bottom, startAngle, sweepAngle, useCenter, paint).

canvas.drawArc(left, top, right, bottom, startAngle, sweepAngle, useCenter, paint)

  • left {number} Left X of the oval bounds
  • top {number} Top Y of the oval bounds
  • right {number} Right X of the oval bounds
  • bottom {number} Bottom Y of the oval bounds
  • startAngle {number} Start angle (degrees)
  • sweepAngle {number} Sweep angle (clockwise, degrees)
  • useCenter {boolean} Whether to connect the arc to the oval center
  • paint {Paint} Paint

Draw an arc in the drawable area using the oval bounds (left, top) - (right, bottom). For details, see canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint).

canvas.drawRoundRect(rect, rx, ry, paint)

  • rect {RectF} Rectangle bounds
  • rx {number} X radius for corners
  • ry {number} Y radius for corners
  • paint {Paint} Paint

Draw a round-rect specified by bounds rect and corner radii rx, ry. The paint Style determines whether it is stroked, filled, or both.

Equivalent to canvas.drawRoundRect(rect.left, rect.top, rect.right, rect.bottom, rx, ry, paint).

canvas.drawRoundRect(left, top, right, bottom, rx, ry, paint)

  • left {number} Left X
  • top {number} Top Y
  • right {number} Right X
  • bottom {number} Bottom Y
  • rx {number} X radius for corners
  • ry {number} Y radius for corners
  • paint {Paint} Paint

Draw a round-rect defined by (left, top) - (right, bottom) with corner radii rx, ry. The paint Style determines whether it is stroked, filled, or both.

canvas.drawPath(path, paint)

  • path {Path} Path
  • paint {Paint} Paint

Draw the specified path. The paint Style determines whether the path is stroked, filled, or both.

canvas.drawBitmap(bitmap, left, top, paint)

  • bitmap {Bitmap} Bitmap
  • left {number} X coordinate
  • top {number} Y coordinate
  • paint {Paint} Paint

Draw the specified bitmap so its top-left corner is at (left, top), applying the canvas transform matrix.

Tips

If the paint uses a mask filter and the filter area is larger than the bitmap (e.g. BlurMaskFilter), the bitmap will be drawn as if a shader with CLAMP tiling was applied. Colors outside the original bitmap bounds will repeat the edge pixels.

If the bitmap density differs from the canvas density, the bitmap will be scaled to match the canvas density before drawing.

canvas.drawPicture(picture)

  • picture {Picture} Picture

Save the canvas transform and clip bounds, draw the picture, then restore them. This differs from picture.draw(canvas), which does not save/restore automatically.

Tips

Drawing a picture forces it to exit recording mode (i.e. picture.endRecording()) so it can be drawn.

canvas.drawText(text, x, y, paint)

  • text {string} Text
  • x {number} X coordinate
  • y {number} Y coordinate
  • paint {Paint} Paint

Draw text in the drawable area so the text origin is at (x, y). The start position depends on the paint alignment options. Text style depends on paint settings.

canvas.drawTextOnPath(text, path, hOffset, vOffset, paint)

  • text {string} Text
  • path {Path} Path
  • hOffset {number} Offset parallel to the path (positive moves along the path direction)
  • vOffset {number} Offset perpendicular to the path (positive moves downward relative to the text)
  • paint {Paint} Paint

Draw text along the specified path. The start position depends on paint alignment options. Text style depends on paint settings.

canvas.translate(dx, dy)

  • dx {number} Translation along +X (negative means opposite direction)
  • dy {number} Translation along +Y (negative means opposite direction)

Right-multiply the current transform matrix by a translation matrix, effectively translating the coordinate system.

canvas.scale(sx, sy[, px, py])

  • sx {number} Scale factor on X (negative flips along X)
  • sy {number} Scale factor on Y (negative flips along Y)
  • px {number} Pivot X, default 0
  • py {number} Pivot Y, default 0

Right-multiply the current transform matrix by a scaling matrix. This scales the coordinate system around (px, py). A factor > 1 zooms in; < 1 zooms out.

canvas.rotate(degrees[, px, py])

  • degrees {number} Rotation angle (degrees)
  • px {number} Pivot X, default 0
  • py {number} Pivot Y, default 0

Right-multiply the current transform matrix by a rotation matrix, effectively rotating the coordinate system around (px, py) by the specified angle.

canvas.skew(sx, sy)

  • sx {number} Skew factor along X axis
  • sy {number} Skew factor along Y axis

Right-multiply the current transform matrix by a skew matrix.

Copyright © 2026 老猫