Version: Next

CanvasContext

The drawing context of the canvas component.

Methods

Property	Type	Description
fillStyle	`string`	The fill color, used in the same way as [CanvasContext.setFillStyle()].
font	`string`	The current font style. It is a DOMString that conforms to the CSS font syntaxwith at least the font size and family passed. The default value is 10px sans-serif.
globalAlpha	`number`	The global brush transparency. The value range is 0-1. 0 indicates completely transparent and 1 indicates completely opaque.
globalCompositeOperation	`string`	The type of compositing operation applied when drawing a new shape. The Android version only supports merging `fill` blocks, and `source-over` is used to merge `stroke` line segments. The following operations are supported: - Android: xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light - iOS: xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity
lineCap	`"butt" \| "round" \| "square"`	The endpoint style of the line, used in the same way as [CanvasContext.setLineCap()].
lineDashOffset	`number`	The dashed line offset, with an initial value of 0.
lineJoin	`"round" \| "bevel" \| "miter"`	The intersection style of the line, used in the same way as [CanvasContext.setLineJoin()]。
lineWidth	`number`	The width of the line, used in the same way as [CanvasContext.setLineWidth()]。
miterLimit	`number`	The maximum miter length, used in the same ways as [CanvasContext.setMiterLimit()]。
shadowBlur	`number`	The fuzziness level of the shadow.
shadowColor	`number`	The color of the shadow.
shadowOffsetX	`number`	The horizontal offset of the shadow relative to the shape.
shadowOffsetY	`number`	The vertical offset of the shadow relative to the shape.
strokeStyle	`string`	The border color, used in the same way as [CanvasContext.setFillStyle()]。

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)

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

Property	Type	Description
x	`number`	The x-coordinate of the center point.
y	`number`	The y-coordinate of the center point.
r	`number`	The radius of the circle.
sAngle	`number`	The start radian (at the 3 o'clock position).
eAngle	`number`	The end radian.
counterclockwise	`boolean`	Indicates whether the direction of the arc is counterclockwise.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.arc	✔️

arcTo

Draws an arc path based on control points and radius.

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

Property	Type	Description
x1	`number`	The x-coordinate of the first control point.
y1	`number`	The y-coordinate of the first control point.
x2	`number`	The x-coordinate of the second control point.
y2	`number`	The y-coordinate of the second control point.
radius	`number`	The radius of the arc.

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.arcTo	✔️

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.

() => 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

API	WeChat Mini-Program	H5	React Native
CanvasContext.beginPath	✔️

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)

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

Property	Type	Description
cp1x	`number`	The x-coordinate of the first Bézier control point.
cp1y	`number`	The y-coordinate of the first Bézier control point.
cp2x	`number`	The x-coordinate of the second Bézier control point.
cp2y	`number`	The y-coordinate of the second Bézier control point.
x	`number`	The x-coordinate of the end point.
y	`number`	The y-coordinate of the end point.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.bezierCurveTo	✔️

clearRect

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

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

Property	Type	Description
x	`number`	The x-coordinate of the top-left corner of the rectangular path.
y	`number`	The y-coordinate of the top-left corner of the rectangular path.
width	`number`	The width of the rectangular path.
height	`number`	The height of the rectangular path.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.clearRect	✔️

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.

() => 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

API	WeChat Mini-Program	H5	React Native
CanvasContext.clip	✔️

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.

() => 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

API	WeChat Mini-Program	H5	React Native
CanvasContext.closePath	✔️

createPattern

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

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

Property	Type	Description
image	`string`	The source of the repeated image. Only in-package paths and temporary paths are supported.
repetition	`"repeat" \| "repeat-x" \| "repeat-y" \| "no-repeat"`	Indicates how to repeat the image.

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.createPattern	✔️

draw

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

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

Property	Type	Description
reserve	`boolean`	Indicates whether this drawing follows the previous drawing. If the reserve parameter is false (default), the native layer clears the canvas before drawing the content of this call. If the reserve parameter is true, the content on the current canvas is retained and the content of the drawCanvas call is drawn over it.
callback	`(...args: any[]) => any`	The callback function executed after the drawing is completed.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.draw	✔️

drawImage

Draws an image to the canvas.

{ (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; }

Property	Type	Description
imageResource	`string`	The source of the image to draw.
sx	`number`	The x-coordinate of the top-left corner of the source image's rectangular selection box.
sy	`number`	The y-coordinate of the top-left corner of the source image's rectangular selection box.
sWidth	`number`	The width of the source image's rectangular selection box.
sHeight	`number`	The height of the source image's rectangular selection box.
dx	`number`	The x-axis position of the image's top-left corner on the destination canvas.
dy	`number`	The y-axis position of the image's top-left corner on the destination canvas.
dWidth	`number`	The width of the image drawn on the canvas. The drawn image can be zoomed in/out.
dHeight	`number`	The height of the image drawn on the canvas. The drawn image can be zoomed in/out.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.drawImage	✔️

fill

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

() => 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

API	WeChat Mini-Program	H5	React Native
CanvasContext.fill	✔️

fillRect

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

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

Property	Type	Description
x	`number`	The x-coordinate of the top-left corner of the rectangular path.
y	`number`	The y-coordinate of the top-left corner of the rectangular path.
width	`number`	The width of the rectangular path.
height	`number`	The height of the rectangular path.

Sample Code

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

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.fillRect	✔️

fillText

Draws filled text on the canvas.

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

Property	Type	Description
text	`string`	The text output on the canvas.
x	`number`	The x-coordinate of the top-left corner of the text to be drawn.
y	`number`	The y-coordinate of the top-left corner of the text to be drawn.
maxWidth	`number`	The maximum width of the drawing (optional).

Sample Code

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

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.fillText	✔️

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.

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

Property	Type	Description
x	`number`	The x-coordinate of the destination location.
y	`number`	The y-coordinate of the destination location.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.lineTo	✔️

moveTo

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

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

Property	Type	Description
x	`number`	The x-coordinate of the destination location.
y	`number`	The y-coordinate of the destination location.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.moveTo	✔️

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)

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

Property	Type	Description
cpx	`number`	The x-coordinate of the Bézier control point.
cpy	`number`	The y-coordinate of the Bézier control point.
x	`number`	The x-coordinate of the end point.
y	`number`	The y-coordinate of the end point.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.quadraticCurveTo	✔️

rect

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

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

Property	Type	Description
x	`number`	The x-coordinate of the top-left corner of the rectangular path.
y	`number`	The y-coordinate of the top-left corner of the rectangular path.
width	`number`	The width of the rectangular path.
height	`number`	The height of the rectangular path.

Sample Code

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

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.rect	✔️

restore

Restores a drawing context that is previously saved.

() => 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

API	WeChat Mini-Program	H5	React Native
CanvasContext.restore	✔️

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.

(rotate: number) => void

Property	Type	Description
rotate	`number`	The rotation angle in radians (degrees * Math.PI/180; degrees: 0-360).

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.rotate	✔️

save

Saves the drawing context.

() => 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

API	WeChat Mini-Program	H5	React Native
CanvasContext.save	✔️

scale

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

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

Property	Type	Description
scaleWidth	`number`	The scale for horizontal coordinate zoom (1 = 100%, 0.5 = 50%, 2 = 200%).
scaleHeight	`number`	The scale for vertical coordinate zoom (1 = 100%, 0.5 = 50%, 2 = 200%).

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.scale	✔️

setFillStyle

Sets the fill color.

(color: string | CanvasGradient) => void

Property	Type	Description
color	`string \| CanvasGradient`	The fill color. The default color is black.

Sample Code

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

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.setFillStyle	✔️

setFontSize

Sets the font size.

(fontSize: number) => void

Property	Type	Description
fontSize	`number`	The font size.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setFontSize	✔️

setGlobalAlpha

Sets the global brush transparency.

(alpha: number) => void

Property	Type	Description
alpha	`number`	The transparency. The value range is 0-1. 0 indicates completely transparent and 1 indicates completely opaque.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setGlobalAlpha	✔️

setLineCap

Sets the endpoint style of the line.

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

Property	Type	Description
lineCap	`"butt" \| "round" \| "square"`	The endpoint style of the line.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setLineCap	✔️

setLineDash

Sets the dashed line style.

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

Property	Type	Description
pattern	`number[]`	A set of numbers describing the length and spacing of the line segments (unit: coordinate space)
offset	`number`	The dashed line offset.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setLineDash	✔️

setLineJoin

Sets the intersection style of the line.

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

Property	Type	Description
lineJoin	`"round" \| "bevel" \| "miter"`	The intersection style of the line.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setLineJoin	✔️

setLineWidth

Sets the width of the line.

(lineWidth: number) => void

Property	Type	Description
lineWidth	`number`	The witdth of the line in pixels.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setLineWidth	✔️

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.

(miterLimit: number) => void

Property	Type	Description
miterLimit	`number`	The maximum miter length.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setMiterLimit	✔️

setShadow

Sets the shadow style.

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

Property	Type	Description
offsetX	`number`	The horizontal offset of the shadow relative to the shape. The default value is 0.
offsetY	`number`	The vertical offset of the shadow relative to the shape. The default value is 0.
blur	`number`	The fuzziness level of the shadow. Higher values indicate greater fuzziness. The value range is 0-100 and the default value is 0.
color	`string`	The color of the shadow. The default value is black.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setShadow	✔️

setStrokeStyle

Sets the border color.

(color: string | CanvasGradient) => void

Property	Type	Description
color	`string \| CanvasGradient`	The border color. The default color is black.

Sample Code

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

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.setStrokeStyle	✔️

setTextAlign

Sets the text alignment.

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

Property	Type	Description
align	`"left" \| "center" \| "right"`	The text alignment method.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setTextAlign	✔️

setTextBaseline

Sets the vertical text alignment.

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

Property	Type	Description
textBaseline	`"top" \| "bottom" \| "middle" \| "normal"`	The vertical text alignment method.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.setTextBaseline	✔️

setTransform

Resets (overrides) the current transformation with matrix.

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

Property	Type	Description
scaleX	`number`	Horizontal zoom
scaleY	`number`	Vertical zoom
skewX	`number`	Horizontal skew
skewY	`number`	Vertical skew
translateX	`number`	Horizontal translation
translateY	`number`	Vertical translation

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.setTransform	✔️

stroke

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

() => 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

API	WeChat Mini-Program	H5	React Native
CanvasContext.stroke	✔️

strokeRect

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

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

Property	Type	Description
x	`number`	The x-coordinate of the top-left corner of the rectangular path.
y	`number`	The y-coordinate of the top-left corner of the rectangular path.
width	`number`	The width of the rectangular path.
height	`number`	The height of the rectangular path.

Sample Code

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

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.strokeRect	✔️

strokeText

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

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

Property	Type	Description
text	`string`	The text to be drawn.
x	`number`	The x-coordinate of the text start point.
y	`number`	The y-coordinate of the text start point.
maxWidth	`number`	The maximum width of the drawing (optional).

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.strokeText	✔️

transform

Multiplies the current transformation with matrix.

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

Property	Type	Description
scaleX	`number`	Horizontal zoom
scaleY	`number`	Vertical zoom
skewX	`number`	Horizontal skew
skewY	`number`	Vertical skew
translateX	`number`	Horizontal translation
translateY	`number`	Vertical translation

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.transform	✔️

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.

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

Property	Type	Description
x	`number`	The horizontal coordinate offset.
y	`number`	The vertical coordinate offset.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.translate	✔️

measureText

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

(text: string) => TextMetrics

Property	Type	Description
text	`string`	The text to be measured.

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.measureText	✔️

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.

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

Property	Type	Description
x	`number`	The x-coordinate of the center point.
y	`number`	The y-coordinate of the center point.
r	`number`	The radius of the circle.

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

API	WeChat Mini-Program	H5	React Native
CanvasContext.createCircularGradient	✔️

createLinearGradient

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

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

Property	Type	Description
x0	`number`	The x-coordinate of the start point.
y0	`number`	The y-coordinate of the start point.
x1	`number`	The x-coordinate of the end point.
y1	`number`	The y-coordinate of the end point.

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()

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.createLinearGradient	✔️

Parameters

repetition

Indicates how to repeat the image.

Property	Description
repeat	Repeat horizontally and vertically
repeat-x	Repeat horizontally
repeat-y	Repeat vertically
no-repeat	Do not repeat

lineCap

参数 lineCap 可选值

Property	Description
butt	Adds a straight edge to each end of the line
round	Adds a round line cap to each end of the line
square	Adds a square line cap to each end of the line

lineJoin

Valid values of lineJoin

Property	Description
bevel	Bevel
round	Round
miter	Sharp

align

Valid values of align

Property	Description
left	Left aligned
center	Center aligned
right	Right aligned

textBaseline

Valid values of textBaseline

Property	Description
top	Top aligned
bottom	Bottom aligned
middle	Center aligned
normal

API Support

API	WeChat Mini-Program	H5	React Native
CanvasContext.arc	✔️
CanvasContext.arcTo	✔️
CanvasContext.beginPath	✔️
CanvasContext.bezierCurveTo	✔️
CanvasContext.clearRect	✔️
CanvasContext.clip	✔️
CanvasContext.closePath	✔️
CanvasContext.createPattern	✔️
CanvasContext.draw	✔️
CanvasContext.drawImage	✔️
CanvasContext.fill	✔️
CanvasContext.fillRect	✔️
CanvasContext.fillText	✔️
CanvasContext.lineTo	✔️
CanvasContext.moveTo	✔️
CanvasContext.quadraticCurveTo	✔️
CanvasContext.rect	✔️
CanvasContext.restore	✔️
CanvasContext.rotate	✔️
CanvasContext.save	✔️
CanvasContext.scale	✔️
CanvasContext.setFillStyle	✔️
CanvasContext.setFontSize	✔️
CanvasContext.setGlobalAlpha	✔️
CanvasContext.setLineCap	✔️
CanvasContext.setLineDash	✔️
CanvasContext.setLineJoin	✔️
CanvasContext.setLineWidth	✔️
CanvasContext.setMiterLimit	✔️
CanvasContext.setShadow	✔️
CanvasContext.setStrokeStyle	✔️
CanvasContext.setTextAlign	✔️
CanvasContext.setTextBaseline	✔️
CanvasContext.setTransform	✔️
CanvasContext.stroke	✔️
CanvasContext.strokeRect	✔️
CanvasContext.strokeText	✔️
CanvasContext.transform	✔️
CanvasContext.translate	✔️
CanvasContext.measureText	✔️
CanvasContext.createCircularGradient	✔️
CanvasContext.createLinearGradient	✔️

Methods​

arc​

Sample Code​

API Support​

arcTo​

API Support​

beginPath​

Sample Code​

API Support​

bezierCurveTo​

Sample Code​

API Support​

clearRect​

Sample Code​

API Support​

clip​

Sample Code​

API Support​

closePath​

Sample Code​

Example 1​

Example 2​

API Support​

createPattern​

API Support​

draw​

Sample Code​

Example 1​

Example 2​

API Support​

drawImage​

Sample Code​

API Support​

fill​

Sample Code​

Example 1​

Example 2​

API Support​

fillRect​

Sample Code​

API Support​

fillText​

Sample Code​

API Support​

lineTo​

Sample Code​

API Support​

moveTo​

Sample Code​

API Support​

quadraticCurveTo​

Sample Code​

API Support​

rect​

Sample Code​

API Support​

restore​

Sample Code​

API Support​

rotate​

Sample Code​

API Support​

save​

Sample Code​

API Support​

scale​

Sample Code​

API Support​

setFillStyle​

Sample Code​

API Support​

setFontSize​

Sample Code​

API Support​

setGlobalAlpha​

Sample Code​

API Support​

setLineCap​

Sample Code​

API Support​

Methods

arc

Sample Code

API Support

arcTo

API Support

beginPath

Sample Code

API Support

bezierCurveTo

Sample Code

API Support

clearRect

Sample Code

API Support

clip

Sample Code

API Support

closePath

Sample Code

Example 1

Example 2

API Support

createPattern

API Support

draw

Sample Code

Example 1

Example 2

API Support

drawImage

Sample Code

API Support

fill

Sample Code

Example 1

Example 2

API Support

fillRect

Sample Code

API Support

fillText

Sample Code

API Support

lineTo

Sample Code

API Support

moveTo

Sample Code

API Support

quadraticCurveTo

Sample Code

API Support

rect

Sample Code

API Support

restore

Sample Code

API Support

rotate

Sample Code

API Support

save

Sample Code

API Support

scale

Sample Code

API Support

setFillStyle

Sample Code

API Support

setFontSize

Sample Code

API Support

setGlobalAlpha

Sample Code

API Support

setLineCap

Sample Code

API Support