Canvas
declare class Canvas {}
The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).
Methods
| method | Signature | Description |
|---|---|---|
| translate | translate(dx: number, dy: number): void; | Preconcat the current matrix with the specified translation |
| rotate | rotate(degrees: number): void | Preconcat the current matrix with the specified rotation. |
| rotate | rotate(degrees: number, px: number, py: number): void; | Preconcat the current matrix with the specified rotation. |
| scale | scale(sx: number, sy: number): void; | Preconcat the current matrix with the specified scale. |
| save | save(): number; | Saves the current matrix and clip onto a private stack. Subsequent calls to translate,scale,rotate,skew,concat or clipRect, clipPath will all operate as usual, but when the balancing call to restore() is made, those calls will be forgotten, and the settings that existed before the save() will be reinstated. |
| restore | restore(): void; | This call balances a previous call to save(), and is used to remove all modifications to the matrix/clip state since the last save call. It is an error to call restore() more times than save() was called. |
| clearCanvas | clearCanvas(): void; | Clear all pixels of the canvas |
| clearCanvas | clearCanvas(rect: Rect): void; | Clear the pixels within the rectangle of the canvas |
| clearCanvas | clearCanvas(width: number, height: number): void; | Clear pixels within the size of the canvas |
| getWidth | getWidth(): number; | Returns the width of the current drawing layer |
| getHeight | getHeight(): number; | Returns the height of the current drawing layer |
| getDevicePixelRatio | getDevicePixelRatio(): number; | Get device pixel ratio |
| getMatrix | getMatrix(): Matrix; | Return a new matrix with a copy of the canvas' current transformation matrix. |
| getClipBounds | getClipBounds(): Rect; | Retrieve the bounds of the current clip (in local coordinates). |
| getClipBounds | getClipBounds(rect: Rect): boolean; | Return the bounds of the current clip (in local coordinates) in the bounds parameter, and return true if it is non-empty. This can be useful in a way similar to quickReject, in that it tells you that drawing outside of these bounds will be clipped out. |
| clipPath | clipPath(path: Path): void; | Intersect the current clip with the specified path. |
| drawOval | drawOval(oval: Rect, paint: Paint): void; | Draw the specified oval using the specified paint. The oval will be filled or framed based on the Style in the paint. |
| drawOval | drawOval(left: number, top: number, right: number, bottom: number, paint: Paint): void; | Draw the specified oval using the specified paint. The oval will be filled or framed based on the Style in the paint. |
| clipRoundRect | clipRoundRect(rect: Rect, radius: number): void; | Intersects the current clip with the specified rectangle, in local coordinates, passing in the clip's rounded corners |
| clipRoundRect | clipRoundRect(rect: Rect, ltr: number, lbr: number, rtr: number, rbr: number): void; | Intersects the current clip with the specified rectangle, in local coordinates, passing in the clip's rounded corners |
| clipRoundRect | clipRoundRect(left: number, top: number, right: number, bottom: number, ltr: number, lbr: number, rtr: number, rbr: number): void; | Intersects the current clip with the specified rectangle, in local coordinates, passing in the clip's rounded corners |
| clipRect | clipRect(rect: Rect): void; | Intersect the current clip with the specified rectangle, which is expressed in local coordinates. |
| clipRect | clipRect(left: number, top: number, right: number, bottom: number): void; | Intersect the current clip with the specified rectangle, which is expressed in local coordinates. |
| concat | concat(matrix: Matrix): void; | Preconcat the current matrix with the specified matrix. If the specified matrix is null, this method does nothing. |
| drawColor | drawColor(rect: Rect, color: number): void; | The color of the filled rectangle |
| quickReject | quickReject(rect: Rect): boolean; | Return true if the specified rectangle, after being transformed by the current matrix, would lie completely outside of the current clip. Call this to check if an area you intend to draw into is clipped out (and therefore you can skip making the draw calls). |
| quickReject | quickReject(path: Path): boolean; | Return true if the specified path, after being transformed by the current matrix, would lie completely outside of the current clip. Call this to check if an area you intend to draw into is clipped out (and therefore you can skip making the draw calls). Note: for speed it may return false even if the path itself might not intersect the clip (i.e. the bounds of the path intersects, but the path does not). |
| quickReject | quickReject(left: number, top: number, right: number, bottom: number): boolean; | Return true if the specified rectangle, after being transformed by the current matrix, would lie completely outside of the current clip. Call this to check if an area you intend to draw into is clipped out (and therefore you can skip making the draw calls). |
| drawRoundRect | drawRoundRect(rect: Rect, radius: number, paint: Paint): void; | Draw a rounded rectangle |
| drawRoundRect | drawRoundRect(rect: Rect, ltr: number, lbr: number, rtr: number, rbr: number, paint: Paint): void; | Draw a rounded rectangle |
| drawRoundRect | drawRoundRect(left: number, top: number, right: number, bottom: number, ltr: number, lbr: number, rtr: number, rbr: number, paint: Paint): void; | Draw a rounded rectangle |
| drawRGB | drawRGB(rect: Rect, r: number, g: number, b: number): void; | Rgb color to fill the rectangular area |
| drawARGB | drawARGB(rect: Rect, a: number, r: number, g: number, b: number): void; | Argb color to fill the rectangular area |
| drawRect | drawRect(rect: Rect, paint: Paint): void; | Draw rectangle |
| drawRect | drawRect(left: number, top: number, right: number, bottom: number, paint: Paint): void; | Draw rectangle |
| drawLine | drawLine(sx: number, sy: number, ex: number, ey: number, paint: Paint): void; | Draw a line segment with the specified start and stop x,y coordinates, using the specified paint. Note that since a line is always "framed", the Style is ignored in the paint. |
| drawLines | drawLines(pts: number[], paint: Paint): void; | Draw multiple line segments |
| drawDashLine | drawDashLine(sx: number, sy: number, ex: number, ey: number, dash: number[], offset: number, paint: Paint): void; | Draw dotted line |
| drawDashLines | drawDashLines(pts: number[], dash: number[], offset: number, paint: Paint): void; | Draw multiple dashed lines |
| drawPath | drawPath(path: Path, paint: Paint): void; | Draw the specified path using the specified paint. The path will be filled or framed based on the Style in the paint. |
| drawText | drawText(text: CharSequence, x: number, y: number, paint: Paint): void; | Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted based on the Align setting in the paint. |
| drawText | drawText(text: CharSequence, start: number, end: number, x: number, y: number, paint: Paint): void; | Draw the specified range of text, specified by start/end, with its origin at (x,y), in the specified Paint. The origin is interpreted based on the Align setting in the Paint. |
| drawCircle | drawCircle(cx: number, cy: number, radius: number, paint: Paint): void; | Draw the specified circle using the specified paint. If radius is <= 0, then nothing will be drawn. The circle will be filled or framed based on the Style in the paint. |
| drawArc | drawArc(oval: Rect, startAngle: number, sweepAngle: number, useCenter: boolean, paint: Paint): void; | Draw the specified arc, 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 SkPath::arcTo, 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.) |
| drawArc | drawArc(left: number, top: number, right: number, bottom: number, startAngle: number, sweepAngle: number, useCenter: boolean, paint: Paint): void; | Draw the specified arc, 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 SkPath::arcTo, 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.) |
| drawBitmap | drawBitmap(bitmap: Bitmap, pt: number[], paint: Paint): void; | Draw the specified bitmap, with its [left, top] corner at (x,y), using the specified paint, transformed by the current matrix. |
| drawBitmap | drawBitmap(bitmap: Bitmap, src: Rect, dst: Rect, paint: Paint): void; | Draw the specified bitmap, scaling/translating automatically to fill the destination rectangle. If the source rectangle is not null, it specifies the subset of the bitmap to draw. |
| drawPicture | drawPicture(picture: Picture): void; | Draw the picture |
| drawPicture | drawPicture(picture: Picture, dst: Rect): void; | Draw the picture, stretched to fit into the dst rectangle. |