canvas

Canvas provides support for 2D drawing. It can be used in the development of simple minigames or image editing. It is easy to use canvas to draw lines and shapes on a single bitmap or a canvas.

Important! The canvas module is from Android Canvas. Some usages and documentations of this module are missing but you can find them in Android documentation. See Android Canvas, Android Paint and Android Path for more details.

The coordinate system of canvas is a Cartesian coordinate system. The origin is the top left corner of the control. The x-axis is the top edge of the control and the y-axis is the left edge of the control. For example, on a screen with a resolution of 1920*1080, the canvas control covers the full screen and draws a line from the top left corner to the bottom right corner of the screen as:

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

How the canvas draw is based on the paint. For example, drawing a solid red square as

let paint = new Paint();
// set the paint Style to fill, then the square will be filled
paint.setStyle(Paint.Style.FILL);
// set the color of the paint to red
paint.setColor(colors.RED);
// draw a square from (0, 0) to (100, 100)
canvas.drawRect(0, 0, 100, 100, paint);

If you want to draw the border of the square, you should set the paint Style to stroke.

let paint = new Paint();
// set the paint Style to stroke, then the square will be stroked
paint.setStyle(Paint.Style.STROKE);
// set the color of the paint to red
paint.setColor(colors.RED);
// draw a square from (0, 0) to (100, 100)
canvas.drawRect(0, 0, 100, 100, paint);

Canvas can draw basic shapes, pictures and so on.

canvas.getWidth()

• Returns {number}

Returns the width of the current drawing layer.

canvas.getHeight()

• Returns {number}

Returns the height of the current drawing layer.

canvas.drawRGB(r, g, b)

• r {number} red component (0..255) of the color to draw onto the canvas
• g {number} green component (0..255) of the color to draw onto the canvas
• b {number} blue component (0..255) of the color to draw onto the canvas

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

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

• a {number} alpha component (0..255) of the color to draw onto the canvas
• r {number} red component (0..255) of the color to draw onto the canvas
• g {number} green component (0..255) of the color to draw onto the canvas
• b {number} blue component (0..255) of the color to draw onto the canvas

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

canvas.drawColor(color)

• color {number} the color to draw onto the canvas

Fills the entire drawable area with the specified color.

canvas.drawColor(color, mode)

• color {number} the color to draw onto the canvas
• mode {PorterDuff.Mode} the porter-duff mode to apply to the color

Fills the entire drawable area with the specified color.

canvas.drawPaint(paint)

• paint {Paint} the paint used to draw onto the canvas

Fills the entire drawable area with the specified paint. This is equivalent (but faster) to drawing an infinitely large rectangle with the specified paint.

canvas.drawPoint(x, y, paint)

• x {number} x-coordinate
• y {number} y-coordinate
• paint {Paint} the paint used to draw the point

Draws a point specified by the coordinates (x, y) in the drawable area, and its diameter is specified by the paint's stroke width. The shape of the point is controlled by the paint's Cap type. The shape is a square, unless the cap type is Round, in which case the shape is a circle.

If the stroke width is 0, it will always draws exactly 1 pixel (or at most 4 if antialiasing is enabled).

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

canvas.drawPoints(pts, paint)

• pts {Array<number>} array of points to draw [x0, y0, x1, y1, x2, y2, ...]
• paint {Paint} the paint used to draw the points

Draws multiple points specified by the array of coordinates in the drawable area.

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

• startX {number} the x-coordinate of the start point
• startY {number} the y-coordinate of the start point
• endX {number} the x-coordinate of the end point
• endY {number} the y-coordinate of the end point
• paint {Paint} the paint used to draw the line

Draws the line from (startX, startY) to (endX, endY) in the drawable area. The paint Style is ignored when drawing. In other words, the line is drawn even if the Style is set to fill. Degenerate lines (length is 0) will not be drawn.

canvas.drawLines(pts, paint)

• pts {Array<number>} array of points to draw [x0 y0 x1 y1 x2 y2 ...]
• paint {Paint} the paint used to draw the points

Draw a series of lines in the drawable area.

Each line is taken from 4 consecutive values in the pts array. Thus to draw 1 line, the array must contain at least 4 values. This is logically the same as drawing the array as follows: canvas.drawLine(pts[0], pts[1], pts[2], pts[3], paint) followed by canvas.drawLine(pts[4], pts[5], pts[6], pts[7], paint) and so on.

The paint Style is ignored when drawing. In other words, the line is drawn even if the Style is set to fill.

canvas.drawRect(r, paint)

• r {Rect} the boundaries of the rectangle
• paint {Paint} the paint used to draw the rectangle

Draws the rectangle specified by the rectangle boundary r in the drawable area. The rectangle will be filled or framed based on the paint Style.

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

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

• left {number} the x-coordinate of the left border of the rectangle
• top {number} the y-coordinate of the top border of the rectangle
• right {number} the x-coordinate of the right border of the rectangle
• bottom {number} the y-coordinate of the bottom border of the rectangle
• paint {Paint} the paint used to draw the rectangle

Draws the rectangle specified by the rectangle boundaries (left, top, right, bottom) in the drawable area. The rectangle will be filled or framed based on the paint Style.

canvas.drawOval(oval, paint)

• oval {RectF} the rectangle bounds of the oval to be drawn
• paint {Paint} the paint used to draw the oval

Draw the specified oval in the drawable area. The oval will be filled or framed based on the Style in the paint.

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

• left {number} the x-coordinate of the left border of the rectangle bounds
• top {number} the y-coordinate of the top border of the rectangle bounds
• right {number} the x-coordinate of the right border of the rectangle bounds
• bottom {number} the y-coordinate of the bottom border of the rectangle bounds
• paint {Paint} the paint used to draw the oval

Draw the specified oval in the drawable area. The oval will be filled or framed based on the Style in the paint.

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

• cx {number} the x-coordinate of the center of the circle to be drawn
• cy {number} the y-coordinate of the center of the circle to be drawn
• radius {number} the radius of the circle to be drawn
• paint {Paint} the paint used to draw the circle

Draw the specified circle in the drawable area. If radius is <= 0, then nothing will be drawn. The circle will be filled or framed based on the Style in the paint.

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

• oval {RectF} the bounds of oval used to define the shape and size of the arc
• startAngle {number} starting angle (in degrees) where the arc begins
• sweepAngle {number} sweep angle (in degrees) measured clockwise
• useCenter {boolean} if true, include the center of the oval in the arc
• paint {Paint}the paint used to draw the arc

Draw the specified arc in the drawable area, which will be scaled to fit inside the specified oval.

If the start angle is negative or >= 360, the start angle is treated as start angle modulo 360.

If the sweep angle is >= 360, then the oval is drawn completely. Note that this differs slightly from path.arcTo(oval, startAngle, sweepAngle), which treats the sweep angle modulo 360. If the sweep angle is negative, the sweep angle is treated as sweep angle modulo 360

The arc is drawn clockwise. An angle of 0 degrees correspond to the geometric angle of 0 degrees (3 o'clock on a watch.)

If useCenter is set to true, the border will include the center of the oval in the arc, and close it if it is being stroked. This will draw a wedge.

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}
• top {number}
• right {number}
• bottom {number}
• startAngle {number} starting angle (in degrees) where the arc begins
• sweepAngle {number} sweep angle (in degrees) measured clockwise
• useCenter {boolean} if true, include the center of the oval in the arc
• paint {Paint}the paint used to draw the arc

Draw the specified arc in the drawable area, which will be scaled to fit inside the specified oval. See canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint) for more details.

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

• rect {RectF} the rectangular bounds of the roundRect to be drawn
• rx {number} the x-radius of the oval used to round the corners
• ry {number} the y-radius of the oval used to round the corners
• paint {Paint} the paint used to draw the roundRect

Draw the specified round-rect using the specified paint in the drawable area. The roundrect will be filled or framed based on the Style in the paint.

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}
• top {number}
• right {number}
• bottom {number}
• rx {number} the x-radius of the oval used to round the corners
• ry {number} the y-radius of the oval used to round the corners
• paint {Paint} the paint used to draw the roundRect

Draw the specified round-rect using the specified paint in the drawable area. The roundrect will be filled or framed based on the Style in the paint.

canvas.drawPath(path, paint)

• path {Path} the path to be drawn
• paint {Paint} the paint used to draw the path

Draw the specified path using the specified paint in the drawable area. The path will be filled or framed based on the Style in the paint.

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

• bitmap {Bitmap} the bitmap to be drawn
• left {number} the position of the left side of the bitmap being drawn
• top {number} the position of the top side of the bitmap being drawn
• paint {Paint} the paint used to draw the bitmap (may be null)

Draw the specified bitmap, with its top/left corner at (x,y), using the specified paint, transformed by the current matrix.

Note: if the paint contains a maskfilter that generates a mask which extends beyond the bitmap's original width/height (e.g. BlurMaskFilter), then the bitmap will be drawn as if it were in a Shader with CLAMP mode. Thus the color outside of the original width/height will be the edge color replicated.

If the bitmap and canvas have different densities, this function will take care of automatically scaling the bitmap to draw at the same density as the canvas.

canvas.drawPicture(picture)

• picture {Picture} the picture to be drawn

Save the canvas state, draw the picture, and restore the canvas state. This differs from picture.draw(canvas), which does not perform any save/restore.

Note: This forces the picture to internally call Picture#endRecording in order to prepare for playback.

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

• text {string} the text to be drawn
• x {number} the x-coordinate of the origin of the text being drawn
• y {number} the y-coordinate of the origin of the text being drawn
• paint {Paint} the paint used for the text (e.g. color, size, Style)

Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted based on the Align setting in the paint.

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

• text {string} the text to be drawn
• path {Path} the path the text should follow for its baseline
• hOffset {number} the distance along the path to add to the text's starting position
• vOffset {number} the distance above(-) or below(+) the path to position the text
• paint {Paint} the paint used for the text (e.g. color, size, Style)

Draw the text in the drawable area, with origin at (x,y), using the specified paint, along the specified path. The paint's Align setting determines where along the path to start the text.

canvas.translate(dx, dy)

• dx {number} the distance to translate in X
• dy {number} the distance to translate in Y

Preconcat the current matrix with the specified translation.

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

• sx {number} the amount to scale in X
• sy {number} the amount to scale in Y
• px {number} the x-coord for the pivot point (unchanged by the scale), 0 if not provided
• py {number} the y-coord for the pivot point (unchanged by the scale), 0 if not provided

Preconcat the current matrix with the specified scale.

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

• degrees {number} the amount to rotate, in degrees
• px {number} the x-coord for the pivot point (unchanged by the rotation), 0 if not provided
• py {number} the y-coord for the pivot point (unchanged by the rotation), 0 if not provided

Preconcat the current matrix with the specified rotation.

canvas.skew(sx, sy)

• sx {number} the amount to skew in X
• sy {number} the amount to skew in Y Preconcat the current matrix with the specified skew.

Paint

Matrix

Path

PathEffect

Porter-Duff Mode & Blend Mode

Picture

Shader

MaskFilter

ColorFilter

Region

Typeface

Bitmap & ImageDecoder

NinePatch