Skip to main content
Version: 3.x

CanvasContext

The drawing context of the canvas component.

Reference

Methods

PropertyTypeDescription
fillStylestringThe fill color, used in the same way as [CanvasContext.setFillStyle()].
fontstringThe 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.
globalAlphanumberThe global brush transparency. The value range is 0-1. 0 indicates completely transparent and 1 indicates completely opaque.
globalCompositeOperationstringThe 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()].
lineDashOffsetnumberThe 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()]。
lineWidthnumberThe width of the line, used in the same way as [CanvasContext.setLineWidth()]。
miterLimitnumberThe maximum miter length, used in the same ways as [CanvasContext.setMiterLimit()]。
shadowBlurnumberThe fuzziness level of the shadow.
shadowColornumberThe color of the shadow.
shadowOffsetXnumberThe horizontal offset of the shadow relative to the shape.
shadowOffsetYnumberThe vertical offset of the shadow relative to the shape.
strokeStylestringThe 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)

Reference

(x: number, y: number, r: number, sAngle: number, eAngle: number, counterclockwise?: boolean) => void
PropertyTypeDescription
xnumberThe x-coordinate of the center point.
ynumberThe y-coordinate of the center point.
rnumberThe radius of the circle.
sAnglenumberThe start radian (at the 3 o'clock position).
eAnglenumberThe end radian.
counterclockwisebooleanIndicates 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.arc✔️

arcTo

Draws an arc path based on control points and radius.

Reference

(x1: number, y1: number, x2: number, y2: number, radius: number) => void
PropertyTypeDescription
x1numberThe x-coordinate of the first control point.
y1numberThe y-coordinate of the first control point.
x2numberThe x-coordinate of the second control point.
y2numberThe y-coordinate of the second control point.
radiusnumberThe radius of the arc.

API Support

APIWeChat Mini-ProgramH5React 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.

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

APIWeChat Mini-ProgramH5React 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)

Reference

(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void
PropertyTypeDescription
cp1xnumberThe x-coordinate of the first Bézier control point.
cp1ynumberThe y-coordinate of the first Bézier control point.
cp2xnumberThe x-coordinate of the second Bézier control point.
cp2ynumberThe y-coordinate of the second Bézier control point.
xnumberThe x-coordinate of the end point.
ynumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.bezierCurveTo✔️

clearRect

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

Reference

(x: number, y: number, width: number, height: number) => void
PropertyTypeDescription
xnumberThe x-coordinate of the top-left corner of the rectangular path.
ynumberThe y-coordinate of the top-left corner of the rectangular path.
widthnumberThe width of the rectangular path.
heightnumberThe 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

APIWeChat Mini-ProgramH5React 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.

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

APIWeChat Mini-ProgramH5React 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.

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

APIWeChat Mini-ProgramH5React Native
CanvasContext.closePath✔️

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
PropertyTypeDescription
imagestringThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.createPattern✔️

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
PropertyTypeDescription
reservebooleanIndicates 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[]) => anyThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.draw✔️

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; }
PropertyTypeDescription
imageResourcestringThe source of the image to draw.
sxnumberThe x-coordinate of the top-left corner of the source image's rectangular selection box.
synumberThe y-coordinate of the top-left corner of the source image's rectangular selection box.
sWidthnumberThe width of the source image's rectangular selection box.
sHeightnumberThe height of the source image's rectangular selection box.
dxnumberThe x-axis position of the image's top-left corner on the destination canvas.
dynumberThe y-axis position of the image's top-left corner on the destination canvas.
dWidthnumberThe width of the image drawn on the canvas. The drawn image can be zoomed in/out.
dHeightnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.drawImage✔️

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

APIWeChat Mini-ProgramH5React Native
CanvasContext.fill✔️

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
PropertyTypeDescription
xnumberThe x-coordinate of the top-left corner of the rectangular path.
ynumberThe y-coordinate of the top-left corner of the rectangular path.
widthnumberThe width of the rectangular path.
heightnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.fillRect✔️

fillText

Draws filled text on the canvas.

Reference

(text: string, x: number, y: number, maxWidth?: number) => void
PropertyTypeDescription
textstringThe text output on the canvas.
xnumberThe x-coordinate of the top-left corner of the text to be drawn.
ynumberThe y-coordinate of the top-left corner of the text to be drawn.
maxWidthnumberThe 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

APIWeChat Mini-ProgramH5React 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.

Reference

(x: number, y: number) => void
PropertyTypeDescription
xnumberThe x-coordinate of the destination location.
ynumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.lineTo✔️

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
PropertyTypeDescription
xnumberThe x-coordinate of the destination location.
ynumberThe 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

APIWeChat Mini-ProgramH5React 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)

Reference

(cpx: number, cpy: number, x: number, y: number) => void
PropertyTypeDescription
cpxnumberThe x-coordinate of the Bézier control point.
cpynumberThe y-coordinate of the Bézier control point.
xnumberThe x-coordinate of the end point.
ynumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.quadraticCurveTo✔️

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
PropertyTypeDescription
xnumberThe x-coordinate of the top-left corner of the rectangular path.
ynumberThe y-coordinate of the top-left corner of the rectangular path.
widthnumberThe width of the rectangular path.
heightnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.rect✔️

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

APIWeChat Mini-ProgramH5React 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.

Reference

(rotate: number) => void
PropertyTypeDescription
rotatenumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.rotate✔️

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

APIWeChat Mini-ProgramH5React 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.

Reference

(scaleWidth: number, scaleHeight: number) => void
PropertyTypeDescription
scaleWidthnumberThe scale for horizontal coordinate zoom (1 = 100%, 0.5 = 50%, 2 = 200%).
scaleHeightnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.scale✔️

setFillStyle

Sets the fill color.

Reference

(color: string | CanvasGradient) => void
PropertyTypeDescription
colorstring | CanvasGradientThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setFillStyle✔️

setFontSize

Sets the font size.

Reference

(fontSize: number) => void
PropertyTypeDescription
fontSizenumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setFontSize✔️

setGlobalAlpha

Sets the global brush transparency.

Reference

(alpha: number) => void
PropertyTypeDescription
alphanumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setGlobalAlpha✔️

setLineCap

Sets the endpoint style of the line.

Reference

(lineCap: "butt" | "round" | "square") => void
PropertyTypeDescription
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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setLineCap✔️

setLineDash

Sets the dashed line style.

Reference

(pattern: number[], offset: number) => void
PropertyTypeDescription
patternnumber[]A set of numbers describing the length and spacing of the line segments (unit: coordinate space)
offsetnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setLineDash✔️

setLineJoin

Sets the intersection style of the line.

Reference

(lineJoin: "round" | "bevel" | "miter") => void
PropertyTypeDescription
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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setLineJoin✔️

setLineWidth

Sets the width of the line.

Reference

(lineWidth: number) => void
PropertyTypeDescription
lineWidthnumberThe 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

APIWeChat Mini-ProgramH5React 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.

Reference

(miterLimit: number) => void
PropertyTypeDescription
miterLimitnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setMiterLimit✔️

setShadow

Sets the shadow style.

Reference

(offsetX: number, offsetY: number, blur: number, color: string) => void
PropertyTypeDescription
offsetXnumberThe horizontal offset of the shadow relative to the shape. The default value is 0.
offsetYnumberThe vertical offset of the shadow relative to the shape. The default value is 0.
blurnumberThe fuzziness level of the shadow. Higher values indicate greater fuzziness. The value range is 0-100 and the default value is 0.
colorstringThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setShadow✔️

setStrokeStyle

Sets the border color.

Reference

(color: string | CanvasGradient) => void
PropertyTypeDescription
colorstring | CanvasGradientThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setStrokeStyle✔️

setTextAlign

Sets the text alignment.

Reference

(align: "left" | "center" | "right") => void
PropertyTypeDescription
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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setTextAlign✔️

setTextBaseline

Sets the vertical text alignment.

Reference

(textBaseline: "top" | "bottom" | "middle" | "normal") => void
PropertyTypeDescription
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

APIWeChat Mini-ProgramH5React Native
CanvasContext.setTextBaseline✔️

setTransform

Resets (overrides) the current transformation with matrix.

Reference

(scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number) => void
PropertyTypeDescription
scaleXnumberHorizontal zoom
scaleYnumberVertical zoom
skewXnumberHorizontal skew
skewYnumberVertical skew
translateXnumberHorizontal translation
translateYnumberVertical translation

API Support

APIWeChat Mini-ProgramH5React Native
CanvasContext.setTransform✔️

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

APIWeChat Mini-ProgramH5React 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.

Reference

(x: number, y: number, width: number, height: number) => void
PropertyTypeDescription
xnumberThe x-coordinate of the top-left corner of the rectangular path.
ynumberThe y-coordinate of the top-left corner of the rectangular path.
widthnumberThe width of the rectangular path.
heightnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.strokeRect✔️

strokeText

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

Reference

(text: string, x: number, y: number, maxWidth?: number) => void
PropertyTypeDescription
textstringThe text to be drawn.
xnumberThe x-coordinate of the text start point.
ynumberThe y-coordinate of the text start point.
maxWidthnumberThe maximum width of the drawing (optional).

API Support

APIWeChat Mini-ProgramH5React Native
CanvasContext.strokeText✔️

transform

Multiplies the current transformation with matrix.

Reference

(scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number) => void
PropertyTypeDescription
scaleXnumberHorizontal zoom
scaleYnumberVertical zoom
skewXnumberHorizontal skew
skewYnumberVertical skew
translateXnumberHorizontal translation
translateYnumberVertical translation

API Support

APIWeChat Mini-ProgramH5React 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.

Reference

(x: number, y: number) => void
PropertyTypeDescription
xnumberThe horizontal coordinate offset.
ynumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.translate✔️

measureText

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

Reference

(text: string) => TextMetrics
PropertyTypeDescription
textstringThe text to be measured.

API Support

APIWeChat Mini-ProgramH5React 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.

Reference

(x: number, y: number, r: number) => CanvasGradient
PropertyTypeDescription
xnumberThe x-coordinate of the center point.
ynumberThe y-coordinate of the center point.
rnumberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.createCircularGradient✔️

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
PropertyTypeDescription
x0numberThe x-coordinate of the start point.
y0numberThe y-coordinate of the start point.
x1numberThe x-coordinate of the end point.
y1numberThe 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

APIWeChat Mini-ProgramH5React Native
CanvasContext.createLinearGradient✔️

Parameters

repetition

Indicates how to repeat the image.

PropertyDescription
repeatRepeat horizontally and vertically
repeat-xRepeat horizontally
repeat-yRepeat vertically
no-repeatDo not repeat

lineCap

参数 lineCap 可选值

PropertyDescription
buttAdds a straight edge to each end of the line
roundAdds a round line cap to each end of the line
squareAdds a square line cap to each end of the line

lineJoin

Valid values of lineJoin

PropertyDescription
bevelBevel
roundRound
miterSharp

align

Valid values of align

PropertyDescription
leftLeft aligned
centerCenter aligned
rightRight aligned

textBaseline

Valid values of textBaseline

PropertyDescription
topTop aligned
bottomBottom aligned
middleCenter aligned
normal

API Support

APIWeChat Mini-ProgramH5React 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✔️