CanvasContext

title: CanvasContext

sidebar_label: CanvasContext

The drawing context of the canvas component.

Reference

Methods

arc

Creates an arc.

• To create a circle, specify the start radian as 0 and the end radian as 2 * Math.PI.
• Use the stroke or fill method to draw an arc in canvas.

The three key coordinates for the arc (100, 75, 50, 0, 1.5 * Math.PI) are as follows:

• Green: Center point (100, 75)
• Red: Start radian (0)
• Blue: End radian (1.5 * Math.PI)

Reference

(x: number, y: number, r: number, sAngle: number, eAngle: number, counterclockwise?: boolean) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()
ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)
// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()
ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()
ctx.draw()

API Support

arcTo

Draws an arc path based on control points and radius.

Reference

(x1: number, y1: number, x2: number, y2: number, radius: number) => void

API Support

beginPath

Starts to create a path. You must call fill or stroke to use the path for fill or stroke operations.

• At the very beginning, it is equivalent to calling beginPath once.
• If there are multiple settings of setFillStyle, setStrokeStyle and setLineWidth in a path, the last one set prevails.

Reference

() => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()
// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

API Support

bezierCurveTo

Creates a cubic Bézier curve path. The start point of the curve is the previous point in the path.

The three key coordinates for moveTo (20, 20) and bezierCurveTo (20, 100, 200, 100, 200, 20) are as follows:

• Red: Start point (20, 20)
• Blue: Two control points (20, 100) (200, 100)
• Green: End point (200, 20)

Reference

(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()
ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.arc(200, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
ctx.setFillStyle('black')
ctx.setFontSize(12)
// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(150, 75)
ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()
ctx.draw()

API Support

clearRect

Clears the content in the specified rectangular area on the canvas.

Reference

(x: number, y: number, width: number, height: number) => void

Sample Code

Instead of drawing a white rectangle over the selected area, the clearRect operation clears the content in this rectangle. The following example adds a layer of background color to the canvas for demonstration purposes.

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()

API Support

clip

Cuts an area of any size and shape from the original canvas. Once an area has been cut, all subsequent drawings are limited to the cut area (the other areas of the canvas cannot be accessed). You can use the save method to save the current canvas area before using the clip method. Then, you can use the restore method to restore the canvas at any later time.

Reference

() => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
Taro.downloadFile({
  url: 'https://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
  success: function(res) {
    ctx.save()
    ctx.beginPath()
    ctx.arc(50, 50, 25, 0, 2*Math.PI)
    ctx.clip()
    ctx.drawImage(res.tempFilePath, 25, 25)
    ctx.restore()
    ctx.draw()
  }
})

API Support

closePath

Closes a path by connecting the start and end points. If you do not call fill or stroke and start a new path after closing the path, the previous path will not be rendered.

Reference

() => void

Sample Code

Example 1

const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()

Example 2

const ctx = Taro.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()
// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

API Support

createPattern

Creates a pattern for the specified image. It can repeat the image in the specified direction.

Reference

(image: string, repetition: "repeat" | "repeat-x" | "repeat-y" | "no-repeat") => void

API Support

draw

Draws the objects (path, transformation, and style) previously described in the drawing context to the canvas.

Reference

(reserve?: boolean, callback?: (...args: any[]) => any) => void

Sample Code

Example 1

If the reserve parameter for the second draw() is true, the content drawn by the previous operation is retained. In the context settings, the fillStyle value ‘red’ changes to the default value ‘black’.

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw(true)

Example 2

If the reserve parameter for the second draw() is false, the content drawn by the previous operation is not retained. In the context settings, the fillStyle value is still ‘red’.

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()

API Support

drawImage

Draws an image to the canvas.

Reference

{ (imageResource: string, dx: number, dy: number): void; (imageResource: string, dx: number, dy: number, dWidth: number, dHeight: number): void; (imageResource: string, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): void; }

Sample Code

The code can be written in three ways:

• drawImage(imageResource, dx, dy)
• drawImage(imageResource, dx, dy, dWidth, dHeight)
• drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) (supported as of 1.9.0)

const ctx = Taro.createCanvasContext('myCanvas')
Taro.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

API Support

fill

Fills the content in the current path. The default fill color is black.

Reference

() => void

Sample Code

Example 1

If the current path is not closed, the fill() method connects the start and end points and then fills the path.

const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()

Example 2

The path filled via fill() is calculated starting from beginPath(), and fillRect() is not included.

const ctx = Taro.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()
// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

API Support

fillRect

Fills a rectangle. Use setFillStyle to set the fill color, which is black by default.

Reference

(x: number, y: number, width: number, height: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

API Support

fillText

Draws filled text on the canvas.

Reference

(text: string, x: number, y: number, maxWidth?: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFontSize(20)
ctx.fillText('Hello', 20, 20)
ctx.fillText('MINA', 100, 100)
ctx.draw()

API Support

lineTo

Adds a new point and then creates a line from the last specified point to the target point. Use the stroke method to draw a line.

Reference

(x: number, y: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()

API Support

moveTo

Moves the path to the specified point on the canvas without creating lines. Use the stroke method to draw lines.

Reference

(x: number, y: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.moveTo(10, 50)
ctx.lineTo(100, 50)
ctx.stroke()
ctx.draw()

API Support

quadraticCurveTo

Creates a quadratic Bézier curve path. The start point of the curve is the previous point in the path.

The three key coordinates for moveTo(20, 20) and quadraticCurveTo(20, 100, 200, 20) are as follows:

• Red: Start point (20, 20)
• Blue: Control point (20, 100)
• Green: End point (200, 20)

Reference

(cpx: number, cpy: number, x: number, y: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()
ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()
ctx.setFillStyle('black')
ctx.setFontSize(12)
// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()
// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()
ctx.draw()

API Support

rect

Creates a rectangular path. You must use the fill or stroke method to actually draw the rectangle to the canvas.

Reference

(x: number, y: number, width: number, height: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

API Support

restore

Restores a drawing context that is previously saved.

Reference

() => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()

API Support

rotate

Rotates the current axis clockwise around the origin point. The rotation angles of multiple calls will be superimposed. The origin point can be modified using the translate method.

Reference

(rotate: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)
ctx.draw()

API Support

save

Saves the drawing context.

Reference

() => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()

API Support

scale

Zooms in/out the x- and y- coordinates of the path created after the call. The scales in multiple calls are multiplied.

Reference

(scaleWidth: number, scaleHeight: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)
ctx.draw()

API Support

setFillStyle

Sets the fill color.

Reference

(color: string | CanvasGradient) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

API Support

setFontSize

Sets the font size.

Reference

(fontSize: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFontSize(20)
ctx.fillText('20', 20, 20)
ctx.setFontSize(30)
ctx.fillText('30', 40, 40)
ctx.setFontSize(40)
ctx.fillText('40', 60, 60)
ctx.setFontSize(50)
ctx.fillText('50', 90, 90)
ctx.draw()

API Support

setGlobalAlpha

Sets the global brush transparency.

Reference

(alpha: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.setGlobalAlpha(0.2)
ctx.setFillStyle('blue')
ctx.fillRect(50, 50, 150, 100)
ctx.setFillStyle('yellow')
ctx.fillRect(100, 100, 150, 100)
ctx.draw()

API Support

setLineCap

Sets the endpoint style of the line.

Reference

(lineCap: "butt" | "round" | "square") => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()
ctx.beginPath()
ctx.setLineCap('butt')
ctx.setLineWidth(10)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()
ctx.beginPath()
ctx.setLineCap('round')
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()
ctx.beginPath()
ctx.setLineCap('square')
ctx.setLineWidth(10)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()
ctx.draw()

API Support

setLineDash

Sets the dashed line style.

Reference

(pattern: number[], offset: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setLineDash([10, 20], 5);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.draw()

API Support

setLineJoin

Sets the intersection style of the line.

Reference

(lineJoin: "round" | "bevel" | "miter") => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()
ctx.beginPath()
ctx.setLineJoin('bevel')
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()
ctx.beginPath()
ctx.setLineJoin('round')
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()
ctx.beginPath()
ctx.setLineJoin('miter')
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()
ctx.draw()

API Support

setLineWidth

Sets the width of the line.

Reference

(lineWidth: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()
ctx.beginPath()
ctx.setLineWidth(5)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()
ctx.beginPath()
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()
ctx.beginPath()
ctx.setLineWidth(15)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()
ctx.draw()

API Support

setMiterLimit

Sets the maximum miter length. The miter length is the distance between the inner corner and outer corner at the intersection of two lines. This value is valid when CanvasContext.setLineJoin() is set to miter. When the maximum miter length is exceeded, the lineJoin at the intersection takes the value of bevel.

Reference

(miterLimit: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(1)
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(2)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(3)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(4)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()
ctx.draw()

API Support

setShadow

Sets the shadow style.

Reference

(offsetX: number, offsetY: number, blur: number, color: string) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

API Support

setStrokeStyle

Sets the border color.

Reference

(color: string | CanvasGradient) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

API Support

setTextAlign

Sets the text alignment.

Reference

(align: "left" | "center" | "right") => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()
ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)
ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)
ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)
ctx.draw()

API Support

setTextBaseline

Sets the vertical text alignment.

Reference

(textBaseline: "top" | "bottom" | "middle" | "normal") => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.moveTo(5, 75)
ctx.lineTo(295, 75)
ctx.stroke()
ctx.setFontSize(20)
ctx.setTextBaseline('top')
ctx.fillText('top', 5, 75)
ctx.setTextBaseline('middle')
ctx.fillText('middle', 50, 75)
ctx.setTextBaseline('bottom')
ctx.fillText('bottom', 120, 75)
ctx.setTextBaseline('normal')
ctx.fillText('normal', 200, 75)
ctx.draw()

API Support

setTransform

Resets (overrides) the current transformation with matrix.

Reference

(scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number) => void

API Support

stroke

Draws the borders of the current path. The default color is black.

Reference

() => void

Sample Code

Example 1

const ctx = Taro.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()

Example 2

The path described via stroke() is calculated starting from beginPath(), and strokeRect() is not included.

const ctx = Taro.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setStrokeStyle('yellow')
ctx.stroke()
// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)
// only stoke this rect, not in current path
ctx.setStrokeStyle('blue')
ctx.strokeRect(10, 70, 100, 30)
ctx.rect(10, 100, 100, 30)
// it will stroke current path
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()

API Support

strokeRect

Draws (but not fills) a rectangle. Use setStrokeStyle to set the line color for the rectangle. The default color is black.

Reference

(x: number, y: number, width: number, height: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

API Support

strokeText

Draws text strokes at a given position (x, y).

Reference

(text: string, x: number, y: number, maxWidth?: number) => void

API Support

transform

Multiplies the current transformation with matrix.

Reference

(scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number) => void

API Support

translate

Translates the origin point (0, 0) of the current coordinate system. By default, the origin point of the coordinate system is the top-left corner of the page.

Reference

(x: number, y: number) => void

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.draw()

API Support

measureText

Measures the text size. This synchronous API only returns the text width.

Reference

(text: string) => TextMetrics

API Support

createCircularGradient

Creates a circular color gradient. The start point is at the center of the circle and the end point is in the outer ring. The returned CanvasGradient object must use CanvasGradient.addColorStop() to specify at least two gradient points.

Reference

(x: number, y: number, r: number) => CanvasGradient

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

API Support

createLinearGradient

Creates a linear color gradient. The returned CanvasGradient object must use CanvasGradient.addColorStop() to specify at least two gradient points.

Reference

(x0: number, y0: number, x1: number, y1: number) => CanvasGradient

Sample Code

const ctx = Taro.createCanvasContext('myCanvas')
// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()