Canvas-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

my.createCanvasContext(canvasId)

Note

This API is supported in mPaaS 10.1.32 and later.

Creates a canvas drawing context. This context applies only to the <canvas/> element with the specified `canvasId`.

Parameters

Parameter	Type	Description
canvasId	String	The ID defined on the `<canvas/>` element.

toTempFilePath

Exports the content of the current canvas to an image and returns the file path.

Parameters

Parameter	Type	Required	Description	Minimum base library version
x	Number	No	The starting point on the x-axis of the canvas. The default is 0.	-
y	Number	No	The starting point on the y-axis of the canvas. The default is 0.	-
width	Number	No	The width of the canvas. The default is the canvas width.	-
height	Number	No	The height of the canvas. The default is the canvas height.	-
destWidth	Number	No	The width of the output image. The default is the canvas width.	-
destHeight	Number	No	The height of the output image. The default is the canvas height.	-
fileType	String	No	Specifies the type of the target file. Valid values are `jpg` and `png`. The default value is 1. This feature is available in mPaaS 10.1.60 and later versions.	1.10
quality	Number	No	The quality of the image. This parameter is valid only for `jpg` files. The value ranges from 0 to 1, exclusive of 0. If the value is outside this range, it is treated as 1.0. Supported in mPaaS 10.1.60 and later.	1.10
success	Function	No	The API callback succeeded.	-
fail	Function	No	The callback function for a failed API call.	-
complete	Function	No	The callback function executed when the API call is complete.	-

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.toTempFilePath({
  success() {},
});

setTextAlign

The textAlign property of the Canvas 2D API specifies the text alignment for drawing text. This alignment is relative to the x value of the CanvasRenderingContext2D.fillText method. For example, if textAlign is set to "center", the text is drawn at x - (50% * `width`).

Parameters

Parameter	Type	Definition
textAlign	String	Enumeration values: `left`, `right`, `center`, `start`, `end`.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setTextAlign("left");
ctx.fillText("Hello world", 0, 100);

setTextBaseline

The textBaseline property of the Canvas 2D API specifies the text baseline for drawing text.

Parameters

Parameter	Type	Definition
textBaseline	String	Enumeration values: `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom`.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setTextBaseline("top");
ctx.fillText("Hello world", 0, 100);

setFillStyle

Sets the fill color.

If fillStyle is not set, the default color is black.

Parameters

Parameter	Type	Definition
color	Color	The color.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(50, 50, 100, 175);
ctx.draw();

setStrokeStyle

Sets the stroke color.

If strokeStyle is not set, the default color is black.

Parameters

Parameter	Type	Definition
color	Color	The color.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(50, 50, 100, 175);
ctx.draw();

setShadow

Sets the shadow style.

If you do not set these properties, the default values are 0 for offsetX, 0 for offsetY, 0 for blur, and black for color.

Parameters

Parameter	Type	Value range	Definition
offsetX	Number	-	The horizontal offset of the shadow relative to the shape.
offsetY	Number	-	The vertical offset of the shadow relative to the shape.
blur	Number	0-100	The blur level of the shadow. A larger value creates a more blurred effect.
color	Color	-	The shadow color.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('red');
ctx.setShadow(15, 45, 45, 'yellow');
ctx.fillRect(20, 20, 100, 175);
ctx.draw();

createLinearGradient

Creates a linear gradient.

You must use addColorStop() to specify at least two gradient stops.

Parameters

Parameter	Type	Definition
x0	Number	Starting X coordinate.
y0	Number	Starting Y coordinate.
x1	Number	Ending X coordinate.
y1	Number	Ending Y coordinate.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

const grd = ctx.createLinearGradient(10, 10, 150, 10);
grd.addColorStop(0, 'yellow');
grd.addColorStop(1, 'blue');

ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();

createCircularGradient

Creates a circular gradient.

The starting point is the center of the circle, and the ending point is on the circumference. You must use addColorStop() to specify at least two gradient stops.

Parameters

Parameter	Type	Definition
x	Number	X coordinate of the circle's center.
y	Number	Y coordinate of the circle's center.
r	Number	Radius of the circle.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

const grd = ctx.createCircularGradient(90, 60, 60);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'red');

ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();

addColorStop

Creates a color stop for the gradient.

Areas before the first stop are rendered with the color of the first stop. Areas after the last stop are rendered with the color of the last stop.
You must use addColorStop() to specify at least two gradient stops.

Parameters

Parameter	Type	Definition
stop	Number	The position of the gradient stop. The value ranges from 0 to 1.
color	Color	The color of the gradient stop.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

const grd = ctx.createLinearGradient(40, 20, 230, 40);
grd.addColorStop(0.36, 'orange');
grd.addColorStop(0.56, 'cyan');
grd.addColorStop(0.63, 'yellow');
grd.addColorStop(0.76, 'blue');
grd.addColorStop(0.54, 'green');
grd.addColorStop(1, 'purple');
grd.addColorStop(0.4, 'red');

ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();

setLineWidth

Sets the line width.

Parameters

Parameter	Type	Description
lineWidth	Number	The line width in px.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(250, 10);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(20, 35);
ctx.lineTo(250, 30);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(20);
ctx.moveTo(20, 50);
ctx.lineTo(250, 55);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(25);
ctx.moveTo(20, 80);
ctx.lineTo(250, 85);
ctx.stroke();

ctx.draw();

setLineCap

Sets the style for the end caps of lines.

Parameters

Parameter	Type	Range	Description
lineCap	String	`round`, `butt`, `square`	The style for the end caps of lines.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('round');
ctx.setLineWidth(20);
ctx.moveTo(20, 70);
ctx.lineTo(250, 80);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('butt');
ctx.setLineWidth(10);
ctx.moveTo(25, 80);
ctx.lineTo(250, 30);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('square');
ctx.setLineWidth(10);
ctx.moveTo(35, 47);
ctx.lineTo(230, 120);
ctx.stroke();

ctx.draw();

setLineJoin

Sets the style for the joints of lines.

Parameters

Parameter	Type	Range	Description
lineJoin	String	`round`, `bevel`, `miter`	The style for the joints of lines.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(150, 70);
ctx.lineTo(20, 100);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(20);
ctx.moveTo(100, 20);
ctx.lineTo(280, 80);
ctx.lineTo(100, 100);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(20);
ctx.moveTo(60, 25);
ctx.lineTo(180, 80);
ctx.lineTo(90, 100);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('miter');
ctx.setLineWidth(15);
ctx.moveTo(130, 70);
ctx.lineTo(250, 50);
ctx.lineTo(230, 100);
ctx.stroke();

ctx.draw();

setMiterLimit

Sets the miter limit.

The miter limit is the distance between the inner corner and the outer corner where two lines meet. This parameter only takes effect when setLineJoin() is set to miter. If the miter limit is exceeded, the joint is displayed with a bevel style.

Parameters

Parameter	Type	Description
miterLimit	Number	The miter limit.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(1);
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(2);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(3);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();

ctx.draw();

rect

Creates a rectangle.

You can use the fill() or stroke() method to draw the rectangle on the canvas.

Parameters

Parameter	Type	Description
x	Number	The X coordinate of the upper-left corner of the rectangle.
y	Number	The Y coordinate of the upper-left corner of the rectangle.
width	Number	The width of the rectangle path.
height	Number	The height of the rectangle path.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 250, 80);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();

fillRect

Fills a rectangle.

You can use setFillStyle() to set the fill color. If you do not set a fill color, the default color is black.

Parameters

Parameter	Type	Description
x	Number	The x-coordinate of the upper-left corner of the rectangle.
y	Number	The y-coordinate of the upper-left corner of the rectangle.
width	Number	The width of the rectangle path.
height	Number	The height of the rectangle path.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.fillRect(20, 20, 250, 80);
ctx.setFillStyle('blue');
ctx.draw();

strokeRect

You can draw an unfilled rectangle.

You can use setFillStroke() to set the color of the rectangle's stroke. If a color is not set, it defaults to black.

Parameters

Parameter	Type	Description
x	Number	The x-coordinate of the upper-left corner of the rectangle.
y	Number	The y-coordinate of the upper-left corner of the rectangle.
width	Number	The width of the rectangle path.
height	Number	The height of the rectangle path.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(20, 20, 250, 80);
ctx.draw();

clearRect

Clears the content within a specified rectangular area on the canvas.

clearRect does not draw a white rectangle. It makes the area transparent. To see this effect, you can add a background color to the canvas.

<canvas id="awesomeCanvas" style="border: 1px solid; background: red;"/>

Parameters

Parameter	Type	Description
x	Number	The X coordinate of the upper-left corner of the rectangle.
y	Number	The Y coordinate of the upper-left corner of the rectangle.
width	Number	The width of the rectangle.
height	Number	The height of the rectangle.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(250, 10, 250, 200);
ctx.setFillStyle('yellow');
ctx.fillRect(0, 0, 150, 200);
ctx.clearRect(10, 10, 150, 75);
ctx.draw();

fill

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

If the current path is not closed, the fill() method connects the start and end points and then fills the path. For more information, see Example 1.
The path filled by fill() is based on the path defined since the last call to beginPath(). This does not include any shapes drawn with fillRect(). For more information, see Example 2.

Code examples

Example 1

const ctx = my.createCanvasContext('awesomeCanvas')
ctx.moveTo(20, 20)
ctx.lineTo(200, 20)
ctx.lineTo(200, 200)
ctx.fill()
ctx.draw()

Example 2

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 110, 40);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.rect(20, 30, 150, 40);
ctx.setFillStyle('yellow');
ctx.fillRect(20, 80, 150, 40);
ctx.rect(20, 150, 150, 40);
ctx.setFillStyle('red');
ctx.fill();
ctx.draw();

stroke

Outline the current path.

The path outlined by stroke() is based on the path defined since the last call to beginPath(). This does not include any shapes drawn with strokeRect(). For more information, see Example 2.

Code examples

Example 1

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.lineTo(150, 10);
ctx.lineTo(150, 150);
ctx.stroke();
ctx.draw();

Example 2

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(10, 10, 100, 30);
ctx.setStrokeStyle('blue');
ctx.stroke();
ctx.beginPath();
ctx.rect(20, 50, 150, 50);
ctx.setStrokeStyle('yellow');
ctx.strokeRect(15, 75, 200, 35);
ctx.rect(20, 200, 150, 30);
ctx.setStrokeStyle('red');
ctx.stroke();
ctx.draw();

beginPath

Starts a new path. You can call fill or stroke to fill or outline the path.

When a drawing context is created, beginPath() is called implicitly.
If you call methods such as setFillStyle(), setStrokeStyle(), or setLineWidth() multiple times within the same path, only the last setting takes effect.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.rect(20, 20, 150, 50);
ctx.setFillStyle('blue');
ctx.fill();

ctx.beginPath();
ctx.rect(20, 50, 150, 40);

ctx.setFillStyle('yellow');
ctx.fillRect(20, 170, 150, 40);

ctx.rect(10, 100, 100, 30);

ctx.setFillStyle('red');
ctx.fill();
ctx.draw();

closePath

Closes a path.

Closing a path connects the start and end points.
If you close a path but do not call fill() or stroke() before starting a new path, the previous path is not rendered.

Code examples

Example 1

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.lineTo(150, 20);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.stroke();
ctx.draw();

Example 2

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 150, 50);
ctx.closePath();
ctx.beginPath();
ctx.rect(20, 50, 150, 40);
ctx.setFillStyle('red');
ctx.fillRect(20, 80, 120, 30);
ctx.rect(20, 150, 150, 40);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();

moveTo

Moves the path to a specified point on the canvas without creating a line. You can use the stroke() method to draw lines.

Parameters

Parameter	Type	Description
x	Number	The X coordinate of the destination.
y	Number	The Y coordinate of the destination.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.lineTo(150, 15);

ctx.moveTo(20, 55);
ctx.lineTo(120, 60);
ctx.stroke();
ctx.draw();

lineTo

Adds a new point and creates a line from the last specified point to the new point.

You can use the stroke() method to draw the line.

Parameters

Parameter	Type	Description
x	Number	The X coordinate of the destination.
y	Number	The Y coordinate of the destination.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.rect(20, 20, 80, 30);
ctx.lineTo(120, 80);
ctx.stroke();
ctx.draw();

arc

You can draw an arc.

To create a circle, you can use the arc() method and specify a start angle of 0 and an end angle of 2 * Math.PI.
You can use the stroke() or fill() method to draw the arc on the canvas.

Parameters

Parameter	Type	Description
x	Number	The X coordinate of the circle's center.
y	Number	The Y coordinate of the circle's center.
r	Number	The radius of the circle.
sAngle	Number	The starting angle in radians (at the 3 o'clock position).
eAngle	Number	The ending angle.
counterclockwise	Boolean	Optional. Specifies whether the arc is drawn counterclockwise or clockwise. The default is `false`.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.arc(200, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('#CCCCCC');
ctx.fill();

ctx.beginPath();
ctx.moveTo(50, 65);
ctx.lineTo(170, 80);
ctx.moveTo(200, 35);
ctx.lineTo(200, 235);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();

ctx.setFontSize(12);
ctx.setFillStyle('yellow');
ctx.fillText('0', 165, 78);
ctx.fillText('0.6*PI', 96, 148);
ctx.fillText('1*PI', 15, 57);
ctx.fillText('1.7*PI', 94, 20);

ctx.beginPath();
ctx.arc(200, 85, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();

ctx.beginPath();
ctx.arc(200, 35, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();

ctx.beginPath();
ctx.arc(450, 60, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();

ctx.beginPath();
ctx.arc(150, 35, 50, 0, 1.8 * Math.PI);
ctx.setStrokeStyle('#666666');
ctx.stroke();

ctx.draw();

The key points and angles for arc(150, 35, 50, 0, 1.8 * Math.PI) are as follows:

Green: Center at (15, 35)
Red: The start angle (0)
Blue: The end angle (1.8 * Math.PI)

bezierCurveTo

Creates a cubic Bezier curve path.

The starting point of the curve is the previous point in the path.

Parameters

Parameter	Type	Description
cp1x	Number	The X coordinate of the first Bezier control point.
cp1y	Number	The Y coordinate of the first Bezier control point.
cp2x	Number	The X coordinate of the second Bezier control point.
cp2y	Number	The Y coordinate of the second Bezier control point.
x	Number	The X coordinate of the end point.
y	Number	The Y coordinate of the end point.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.beginPath();
ctx.arc(30, 30, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();

ctx.beginPath();
ctx.arc(250, 25, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();

ctx.beginPath();
ctx.arc(20, 100, 2, 0, 2 * Math.PI);
ctx.arc(200, 100, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();

ctx.setFillStyle('yellow');
ctx.setFontSize(14);

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(30, 100);
ctx.lineTo(150, 75);

ctx.moveTo(250, 30);
ctx.lineTo(250, 80);
ctx.lineTo(70, 75);
ctx.setStrokeStyle('#EEEEEE');
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(30, 150, 250, 150, 180, 20);
ctx.setStrokeStyle('black');
ctx.stroke();

ctx.draw();

The key points for moveTo(30, 30) and bezierCurveTo(30, 150, 250, 150, 180, 20) are as follows:

Red: Starting point (20, 20)
Blue: Two control points at (20, 150) and (250, 150)
Green: The end point (180, 20)

clip

Sets the current path as the clipping path.

Code example

//.js
const ctx = my.createCanvasContext('awesomeCanvas')
my.downloadFile({
  url: 'https://gw.alipayobjects.com/zos/skylark-tools/public/files/dda114e320567e1d304790287d75a029.png',
  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()
  }
})

quadraticCurveTo

Creates a quadratic Bezier curve path.

The starting point of the curve is the previous point in the path.

Parameters

Parameter	Type	Description
cpx	Number	The X coordinate of the Bezier control point.
cpy	Number	The Y coordinate of the Bezier control point.
x	Number	The X coordinate of the end point.
y	Number	The Y coordinate of the end point.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.beginPath();
ctx.arc(30, 30, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();

ctx.beginPath();
ctx.arc(250, 20, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();

ctx.beginPath();
ctx.arc(30, 200, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();

ctx.setFillStyle('black');
ctx.setFontSize(12);

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(30, 150);
ctx.lineTo(250, 30);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.quadraticCurveTo(30, 150, 250, 25);
ctx.setStrokeStyle('black');
ctx.stroke();

ctx.draw();

The key points for moveTo(30, 30) and quadraticCurveTo(30, 150, 250, 25) are as follows:

Red: The starting point (30, 30)
Blue: The control point (30, 150)
Green: The end point (250, 25)

scale

This method scales the horizontal and vertical coordinates of all subsequently created paths. If you call scale multiple times, the scaling factors are multiplied together.

Parameters

Parameter	Type	Description
scaleWidth	Number	The horizontal scaling factor (1 = 100%, 0.5 = 50%, 2 = 200%).
scaleHeight	Number	The vertical scaling factor (1 = 100%, 0.5 = 50%, 2 = 200%).

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.strokeRect(15, 15, 30, 25);
ctx.scale(3, 3);
ctx.strokeRect(15, 15, 30, 25);
ctx.scale(3, 3);
ctx.strokeRect(15, 15, 30, 25);

ctx.draw();

rotate

Rotates the current coordinate system clockwise around the origin. You can change the origin using the translate method. If you call rotate multiple times, the rotation angles are added together.

Parameters

Parameter	Type	Description
rotate	Number	The rotation angle in radians (degrees * Math.PI/180). The degrees value ranges from 0 to 360.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.strokeRect(200, 20, 180, 150);
ctx.rotate(30 * Math.PI / 180);
ctx.strokeRect(200, 20, 180, 150);
ctx.rotate(30 * Math.PI / 180);
ctx.strokeRect(200, 20, 180, 150);

ctx.draw();

translate

Repositions the origin (0, 0) of the current coordinate system. The default origin is the upper-left corner of the canvas.

Parameters

Parameter	Type	Description
x	Number	The horizontal translation amount.
y	Number	The vertical translation amount.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.strokeRect(20, 20, 250, 80);
ctx.translate(30, 30);
ctx.strokeRect(20, 20, 250, 80);
ctx.translate(30, 30);
ctx.strokeRect(20, 20, 250, 80);

ctx.draw();

setFontSize

Sets the font size.

Parameters

Parameter	Type	Description
fontSize	Number	The font size.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.setFontSize(14);
ctx.fillText('14', 20, 20);
ctx.setFontSize(22);
ctx.fillText('22', 40, 40);
ctx.setFontSize(30);
ctx.fillText('30', 60, 60);
ctx.setFontSize(38);
ctx.fillText('38', 90, 90);

ctx.draw();

fillText

Fills the specified text on the canvas.

Parameters

Parameter	Type	Description
text	String	The text.
x	Number	The X coordinate of the upper-left corner to start drawing the text.
y	Number	The Y coordinate of the upper-left corner to start drawing the text.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.setFontSize(42);
ctx.fillText('Hello', 30, 30);
ctx.fillText('alipay', 200, 200);

ctx.draw();

drawImage

Displays the image at its original size.

Parameters

Parameter	Type	Description
imageResource	String	The image resource. Only online CDN addresses or miniapp package addresses are supported. The online CDN must return the `Access-Control-Allow-Origin: *` header.
x	Number	The X coordinate of the upper-left corner of the image.
y	Number	The Y coordinate of the upper-left corner of the image.
width	Number	The width of the image.
height	Number	The height of the image.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.drawImage('https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg', 2, 2, 250, 80);
ctx.draw();

setGlobalAlpha

Sets the global alpha (transparency) value for subsequent drawing operations.

Parameters

Parameter	Type	Value range	Description
alpha	Number	0 or 1	The transparency: 0 indicates fully transparent. 1 indicates fully opaque.

Parameter

Type

Value range

Description

alpha

Number

0 or 1

The transparency:

0 indicates fully transparent.
1 indicates fully opaque.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.setFillStyle('yellow');
ctx.fillRect(10, 10, 150, 100);
ctx.setGlobalAlpha(0.2);
ctx.setFillStyle('blue');
ctx.fillRect(50, 50, 150, 100);
ctx.setFillStyle('red');
ctx.fillRect(100, 100, 150, 100);

ctx.draw();

setLineDash

Sets the style of the dashed line.

Parameters

Parameter	Type	Description
segments	Array`<number>`	An array of numbers that specify the lengths of alternating segments and gaps in coordinate space units. If the number of elements in the array is odd, the elements are copied and repeated. For example, `[5, 15, 25]` becomes `[5, 15, 25, 5, 15, 25]`.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.setLineDash([5, 15, 25]);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.draw();

transform

Applies a transformation by multiplying the current transformation matrix with the matrix described by the method's parameters. This method lets you scale, rotate, move, and skew the context.

Parameters

Parameter	Type	Description
scaleX	Number	Horizontal scaling.
skewX	Number	Horizontal skewing.
skewY	Number	Vertical skewing.
scaleY	Number	Vertical scaling.
translateX	Number	Horizontal shift
translateY	Number	Vertical shift.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.rotate(45 * Math.PI / 180);
ctx.setFillStyle('red');
ctx.fillRect(70,0,100,30);

ctx.transform(1, 1, 0, 1, 0, 0);
ctx.setFillStyle('#000');
ctx.fillRect(0, 0, 100, 100);

ctx.draw();

setTransform

Resets (overwrites) the current transformation with the identity matrix and then calls the transform method with the specified parameters.

Parameters

Parameter	Type	Description
scaleX	Number	Horizontal scaling.
skewX	Number	Horizontal skewing.
skewY	Number	Vertical skewing.
scaleY	Number	Vertical scaling.
translateX	Number	Horizontal translation.
translateY	Number	Vertical shift

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.rotate(45 * Math.PI / 180);
ctx.setFillStyle('red');
ctx.fillRect(70,0,100,30);

ctx.setTransform(1, 1, 0, 1, 0, 0);
ctx.setFillStyle('#000');
ctx.fillRect(0, 0, 100, 100);

ctx.draw();

getImageData

Retrieves the underlying pixel data for a specified area of the canvas.

Note

The minimum base library version required is 1.10.

Parameters

Input parameter	Type	Required	Description
x	Number	Yes	The x-coordinate of the upper-left corner of the rectangular area from which to extract image data.
y	Number	Yes	The y-coordinate of the upper-left corner of the rectangular area from which to extract image data.
width	Number	Yes	The width of the rectangular area from which to extract image data.
height	Number	Yes	The height of the rectangular area from which to extract image data.
success	Function	No	The success callback.
fail	Function	No	The failure callback.
complete	Function	No	The completion callback.

success callback

Parameters

Property	Type	Description
width	Number	The width of the image data's rectangular area.
height	Number	The height of the image data's rectangular area.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.getImageData({
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})

putImageData

You can draw the pixel data to the canvas.

Note

The minimum base library version required is 1.11.

Parameters

Parameter	Type	Required	Description
data	Uint8ClampedArray	Yes	The image pixel data. This is a one-dimensional array where every four items represent the `rgba` values of a single pixel.
x	Number	Yes	The horizontal offset (x-axis) to place the source image data on the destination canvas.
y	Number	Yes	The vertical offset (y-axis) to place the source image data on the destination canvas.
width	Number	Yes	The width of the source image data's rectangular area.
height	Number	Yes	The height of the source image data's rectangular area.
success	Function	No	The success callback.
fail	Function	No	The failure callback.
complete	Function	No	The completion callback.

Code example

const data = new Uint8ClampedArray([255, 0, 0, 1])
const ctx = my.createCanvasContext('awesomeCanvas');

ctx.putImageData({
    x: 0,
    y: 0,
    width: 1,
    height: 1,
    data: data,
    success(res) {}
})

save

Saves the current drawing context.

Code example

//.js
const ctx = my.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()

restore

Restores the previously saved drawing context.

Code example

const ctx = my.createCanvasContext('awesomeCanvas');

ctx.save();
ctx.setFillStyle('red');
ctx.fillRect(20, 20, 250, 80);

ctx.restore();
ctx.fillRect(60, 60, 155, 130);

ctx.draw();

draw

Draws the pending drawing commands, such as paths, transformations, and styles, from the drawing context onto the canvas.

The drawing context must be created by my.createCanvasContext(canvasId).

Parameters

Parameter	Type	Description	Minimum base library version
reserve	Boolean	Optional. Specifies whether the current drawing action should be appended to the previous one. If `reserve` is `false`, the native layer clears the canvas before this draw call. If `reserve` is `true`, the current content on the canvas is preserved, and the new content is drawn on top. The default is `false`.	-
callback	Function	Required. The callback function to execute after the drawing is complete.	1.10

Code examples

Example 1

const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(20, 20, 180, 80);
ctx.draw();
ctx.fillRect(60, 60, 250, 120);
// Preserves the result of the previous drawing.
ctx.draw(true);

Example 2

//.js
const ctx = my.createCanvasContext('awesomeCanvas')
ctx.setFillStyle('blue')
ctx.fillRect(20, 20, 180, 80)
ctx.draw()
ctx.fillRect(60, 60, 250, 120)
// Does not preserve the result of the previous drawing.
ctx.draw(false)