All Products
Search
Document Center

Canvas

Last Updated: Feb 19, 2021

my.createCanvasContext(canvasId)

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

Create a drawing context for the canvas. This drawing context only works on the <canvas/> of the corresponding canvasId.

Parameters

Parameter Type Description
canvasId String ID defined on <canvas/>

toTempFilePath

Export the contents of the current canvas to generate an image and return the file path.

Parameters

Parameter Type Required Description Lowest base library version supported
x Number No X axis starting point of the canvas, the default value is 0. -
y Number No Y axis starting point of the canvas, the default is 0. -
width Number No Canvas width, the default value is canvas width - X. -
height Number No Canvas height, the default value is canvas height - Y. -
destWidth Number No Output image width, the default value is canvas width. -
destHeight Number No Output image height, the default value is canvas height. -
fileType String No Type of the target file. The legal values are jpg and png, and the default value is 1. The parameter is available in mPaaS 10.1.60 and later versions. 1.10
quality Number No Image quality. Currently, the parameter only works on jpg, and the value range is (0, 1]. The parameter is available in mPaaS 10.1.60 and later versions. 1.10
success Function No Interface callback succeeded. -
fail Function No Interface callback failed. -
complete Function No Interface callback completed. -

Code example

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

setTextAlign

textAlign is a property of Canvas 2D API that describes the alignment of text when it is drawn. Note that this alignment is based on the x value of CanvasRenderingContext2D.fillText method. So, if textAlign=”center”, then the text will be drawn at x-50%*width.

Parameters

Parameter Type Definition
textAlign String Enumeration values: “left”, “right”, “center”, “start” and “end”

Code example

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

setTextBaseline

textBaseline is a property of Canvas 2D API that describes the baseline of text when it is drawn.

Parameters

Parameter Type Definition
textBaseline String Enumeration values: “top”, “hanging”, “middle”, “alphabetic”, “ideographic” and “bottom”

Code example

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

setFillStyle

Set the fill color.

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

Parameters

Parameter Type Definition
color Color The color.

Code example

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

setStrokeStyle

Set the border color.

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

Parameters

Parameter Type Definition
color Color The color.

Code example

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

setShadow

Set the shadow style.

If not set, the default values of offsetX, offsetY and blur are all 0, and the default value of color is black.

Parameters

Parameter Type Value range Definition
offsetX Number The offset of the shadow relative to the horizontal direction of the shape
offsetY Number The offset of the shadow relative to the vertical direction of the shape
blur Number 0~100 The blur level of the shadow, the larger the value, the more blurred
color Color Shadow color

Code example

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

createLinearGradient

Create a linear gradient.

You need to use addColorStop() to specify at least two gradientstops.

Parameters

Parameter Type Definition
x0 Number X coordinate of the starting point
y0 Number Y coordinate of the starting point
x1 Number X coordinate of the end point
y1 Number Y coordinate of the end point

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. const grd = ctx.createLinearGradient(10, 10, 150, 10);
  3. grd.addColorStop(0, 'yellow');
  4. grd.addColorStop(1, 'blue');
  5. ctx.setFillStyle(grd);
  6. ctx.fillRect(20, 20, 250, 180);
  7. ctx.draw();

createCircularGradient

Create a circular gradient. The starting point is at the center of the circle and the end point is at the ring.

You need to use addColorStop() to specify at least two gradientstops.

Parameters

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

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. const grd = ctx.createCircularGradient(90, 60, 60);
  3. grd.addColorStop(0, 'blue');
  4. grd.addColorStop(1, 'red');
  5. ctx.setFillStyle(grd);
  6. ctx.fillRect(20, 20, 250, 180);
  7. ctx.draw();

addColorStop

Create a color gradientstop.

Portions smaller than the minimum stop are rendered in the color of the minimum stop, and portions larger than the maximum stop are rendered in the color of the maximum stop.

You need to use addColorStop() to specify at least two gradientstops.

Parameters

Parameter Type Definition
stop Number Indicates that the color gradientstop is positioned between the starting and end points, ranging from 0 to 1
color Color Color of gradientstop

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. const grd = ctx.createLinearGradient(40, 20, 230, 40);
  3. grd.addColorStop(0.36, 'orange');
  4. grd.addColorStop(0.56, 'cyan');
  5. grd.addColorStop(0.63, 'yellow');
  6. grd.addColorStop(0.76, 'blue');
  7. grd.addColorStop(0.54, 'green');
  8. grd.addColorStop(1, 'purple');
  9. grd.addColorStop(0.4, 'red');
  10. ctx.setFillStyle(grd);
  11. ctx.fillRect(20, 20, 250, 180);
  12. ctx.draw();

setLineWidth

Set the width of line.

Parameters

Parameter Type Description
lineWidth Number Line width, in px

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.moveTo(20, 20);
  4. ctx.lineTo(250, 10);
  5. ctx.stroke();
  6. ctx.beginPath();
  7. ctx.setLineWidth(10);
  8. ctx.moveTo(20, 35);
  9. ctx.lineTo(250, 30);
  10. ctx.stroke();
  11. ctx.beginPath();
  12. ctx.setLineWidth(20);
  13. ctx.moveTo(20, 50);
  14. ctx.lineTo(250, 55);
  15. ctx.stroke();
  16. ctx.beginPath();
  17. ctx.setLineWidth(25);
  18. ctx.moveTo(20, 80);
  19. ctx.lineTo(250, 85);
  20. ctx.stroke();
  21. ctx.draw();

setLineCap

Set the end point style of line.

Parameters

Parameter Type Range Description
lineCap String ‘round’, ‘butt’ and ‘square’ End point style of line

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.moveTo(10, 10);
  4. ctx.lineTo(150, 10);
  5. ctx.stroke();
  6. ctx.beginPath();
  7. ctx.setLineCap('round');
  8. ctx.setLineWidth(20);
  9. ctx.moveTo(20, 70);
  10. ctx.lineTo(250, 80);
  11. ctx.stroke();
  12. ctx.beginPath();
  13. ctx.setLineCap('butt');
  14. ctx.setLineWidth(10);
  15. ctx.moveTo(25, 80);
  16. ctx.lineTo(250, 30);
  17. ctx.stroke();
  18. ctx.beginPath();
  19. ctx.setLineCap('square');
  20. ctx.setLineWidth(10);
  21. ctx.moveTo(35, 47);
  22. ctx.lineTo(230, 120);
  23. ctx.stroke();
  24. ctx.draw();

setLineJoin

Set the intersection style of line.

Parameters

Parameter Type Range Description
lineJoin String ‘round’, ‘bevel’ and ‘miter’ End intersection style of line

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.moveTo(20, 30);
  4. ctx.lineTo(150, 70);
  5. ctx.lineTo(20, 100);
  6. ctx.stroke();
  7. ctx.beginPath();
  8. ctx.setLineJoin('round');
  9. ctx.setLineWidth(20);
  10. ctx.moveTo(100, 20);
  11. ctx.lineTo(280, 80);
  12. ctx.lineTo(100, 100);
  13. ctx.stroke();
  14. ctx.beginPath();
  15. ctx.setLineJoin('bevel');
  16. ctx.setLineWidth(20);
  17. ctx.moveTo(60, 25);
  18. ctx.lineTo(180, 80);
  19. ctx.lineTo(90, 100);
  20. ctx.stroke();
  21. ctx.beginPath();
  22. ctx.setLineJoin('miter');
  23. ctx.setLineWidth(15);
  24. ctx.moveTo(130, 70);
  25. ctx.lineTo(250, 50);
  26. ctx.lineTo(230, 100);
  27. ctx.stroke();
  28. ctx.draw();

setMiterLimit

Set the maximum miter length which refers to the distance between the inner and outer corners at the intersection of two lines. Only valid when setLineJoin() is miter. When the maximum miter length is exceeded, the intersection will be displayed by using bevel for lineJoin.

Parameters

Parameter Type Description
miterLimit Number Maximum miter length

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.setLineWidth(15);
  4. ctx.setLineJoin('miter');
  5. ctx.setMiterLimit(1);
  6. ctx.moveTo(10, 10);
  7. ctx.lineTo(100, 50);
  8. ctx.lineTo(10, 90);
  9. ctx.stroke();
  10. ctx.beginPath();
  11. ctx.setLineWidth(15);
  12. ctx.setLineJoin('miter');
  13. ctx.setMiterLimit(2);
  14. ctx.moveTo(50, 10);
  15. ctx.lineTo(140, 50);
  16. ctx.lineTo(50, 90);
  17. ctx.stroke();
  18. ctx.beginPath();
  19. ctx.setLineWidth(15);
  20. ctx.setLineJoin('miter');
  21. ctx.setMiterLimit(3);
  22. ctx.moveTo(90, 10);
  23. ctx.lineTo(180, 50);
  24. ctx.lineTo(90, 90);
  25. ctx.stroke();
  26. ctx.draw();

rect

Create a rectangle.

Use fill() or stroke() method to draw a rectangle on the canvas.

Parameters

Parameter Type Description
x Number X coordinate of the top left corner of rectangle
y Number Y coordinate of the top left corner of rectangle
width Number Rectangular path width
height Number Rectangular path height

Code example

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

fillRect

Fill the rectangle.

Use setFillStyle() to set the fill color of rectangle. If not set, default to black.

Parameters

Parameter Type Description
x Number X coordinate of the top left corner of rectangle
y Number Y coordinate of the top left corner of rectangle
width Number Rectangular path width
height Number Rectangular path height

Code example

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

strokeRect

Draw a rectangle (not filled).

Use setFillStroke() to set the color of rectangle line. If not set, the default is black.

Parameters

Parameter Type Range Description
x Number X coordinate of the top left corner of rectangle
y Number Y coordinate of the top left corner of rectangle
width Number Rectangular path width
height Number Rectangular path height

Code example

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

clearRect

Clear the content within this rectangular area on the canvas.

clearRect It will clear the rectangular instead of drawing a white rectangle. In order to intuitively understand this operation, you can add a layer of background color to the canvas.

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

Parameters

Parameter Type Description
x Number X coordinate of the top left corner of rectangle
y Number Y coordinate of the top left corner of rectangle
width Number Rectangular width
height Number Rectangular height

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFillStyle('blue');
  3. ctx.fillRect(250, 10, 250, 200);
  4. ctx.setFillStyle('yellow');
  5. ctx.fillRect(0, 0, 150, 200);
  6. ctx.clearRect(10, 10, 150, 75);
  7. ctx.draw();

fill

Fill the contents of the current path. The default fill color is black.

  • If the current path is not closed, the fill() method will connect the starting and end points and then fill them. See sample 1 for details.

  • For fill(), the fill path is calculated from beginPath(), but fillRect() is not included. See sample 2 for details.

Code sample

  • Sample 1

    1. const ctx = my.createCanvasContext('awesomeCanvas')
    2. ctx.moveTo(20, 20)
    3. ctx.lineTo(200, 20)
    4. ctx.lineTo(200, 200)
    5. ctx.fill()
    6. ctx.draw()
  • Sample 2

    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.rect(20, 20, 110, 40);
    3. ctx.setFillStyle('blue');
    4. ctx.fill();
    5. ctx.beginPath();
    6. ctx.rect(20, 30, 150, 40);
    7. ctx.setFillStyle('yellow');
    8. ctx.fillRect(20, 80, 150, 40);
    9. ctx.rect(20, 150, 150, 40);
    10. ctx.setFillStyle('red');
    11. ctx.fill();
    12. ctx.draw();

stroke

Draw the border of the current path, the default is black.

stroke() The drawn path is calculated from beginPath(), but strokeRect() is not included. See sample 2 for details.

Code example

  • Sample 1

    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.moveTo(20, 20);
    3. ctx.lineTo(150, 10);
    4. ctx.lineTo(150, 150);
    5. ctx.stroke();
    6. ctx.draw();
  • Sample 2

    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.rect(10, 10, 100, 30);
    3. ctx.setStrokeStyle('blue');
    4. ctx.stroke();
    5. ctx.beginPath();
    6. ctx.rect(20, 50, 150, 50);
    7. ctx.setStrokeStyle('yellow');
    8. ctx.strokeRect(15, 75, 200, 35);
    9. ctx.rect(20, 200, 150, 30);
    10. ctx.setStrokeStyle('red');
    11. ctx.stroke();
    12. ctx.draw();

beginPath

To start creating a path, you need to call fill or stroke to use the path to fill or draw.

  • At the very beginning, it is equivalent to calling beginPath() once.

  • If you set setFillStyle(), setStrokeStyle() or setLineWidth() multiple times within the same path, the last setting will prevail.

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.rect(20, 20, 150, 50);
  3. ctx.setFillStyle('blue');
  4. ctx.fill();
  5. ctx.beginPath();
  6. ctx.rect(20, 50, 150, 40);
  7. ctx.setFillStyle('yellow');
  8. ctx.fillRect(20, 170, 150, 40);
  9. ctx.rect(10, 100, 100, 30);
  10. ctx.setFillStyle('red');
  11. ctx.fill();
  12. ctx.draw();

closePath

Close a path.

  • Closing a path will connect the starting and end points.

  • If fill() or stroke() is not called after the path is closed and a new path is created, the previous path will not be rendered.

Code example

  • Sample 1
    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.moveTo(20, 20);
    3. ctx.lineTo(150, 20);
    4. ctx.lineTo(150, 150);
    5. ctx.closePath();
    6. ctx.stroke();
    7. ctx.draw();
  • Sample 2

    1. const ctx = my.createCanvasContext('awesomeCanvas');
    2. ctx.rect(20, 20, 150, 50);
    3. ctx.closePath();
    4. ctx.beginPath();
    5. ctx.rect(20, 50, 150, 40);
    6. ctx.setFillStyle('red');
    7. ctx.fillRect(20, 80, 120, 30);
    8. ctx.rect(20, 150, 150, 40);
    9. ctx.setFillStyle('blue');
    10. ctx.fill();
    11. ctx.draw();

moveTo

Move the path to a specified position on the canvas without creating a line.

Use the stroke() method to draw lines.

Parameters

Parameter Type Description
x Number X coordinate of target position
y Number Y coordinate of target position

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.moveTo(20, 20);
  3. ctx.lineTo(150, 15);
  4. ctx.moveTo(20, 55);
  5. ctx.lineTo(120, 60);
  6. ctx.stroke();
  7. ctx.draw();

lineTo

Add a new position with the lineTo method and then create a line from the last specified position to the target position.

Use the stroke() method to draw lines.

Parameters

Parameter Type Description
x Number X coordinate of target position
y Number Y coordinate of target position

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.moveTo(20, 20);
  3. ctx.rect(20, 20, 80, 30);
  4. ctx.lineTo(120, 80);
  5. ctx.stroke();
  6. ctx.draw();

arc

Draw an arc.

  • To create a circle, you can use the arc() method to specify a starting radian of 0 and a ending radian of 2 * Math.PI.

  • Use the stroke() or fill() method to draw an arc on the canvas.

Parameters

Parameter Type Description
x Number X coordinate of circle
y Number Y coordinate of circle
r Number Radius of circle
sAngle Number Start radian, in degrees (at 3 o’clock)
eAngle Number End radian
counterclockwise Boolean Optional, specify whether the direction of the radian is counterclockwise or clockwise. The default value is false.

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.arc(200, 75, 50, 0, 2 * Math.PI);
  3. ctx.setFillStyle('#CCCCCC');
  4. ctx.fill();
  5. ctx.beginPath();
  6. ctx.moveTo(50, 65);
  7. ctx.lineTo(170, 80);
  8. ctx.moveTo(200, 35);
  9. ctx.lineTo(200, 235);
  10. ctx.setStrokeStyle('#AAAAAA');
  11. ctx.stroke();
  12. ctx.setFontSize(12);
  13. ctx.setFillStyle('yellow');
  14. ctx.fillText('0', 165, 78);
  15. ctx.fillText('0.6*PI', 96, 148);
  16. ctx.fillText('1*PI', 15, 57);
  17. ctx.fillText('1.7*PI', 94, 20);
  18. ctx.beginPath();
  19. ctx.arc(200, 85, 2, 0, 2 * Math.PI);
  20. ctx.setFillStyle('blue');
  21. ctx.fill();
  22. ctx.beginPath();
  23. ctx.arc(200, 35, 2, 0, 2 * Math.PI);
  24. ctx.setFillStyle('green');
  25. ctx.fill();
  26. ctx.beginPath();
  27. ctx.arc(450, 60, 2, 0, 2 * Math.PI);
  28. ctx.setFillStyle('red');
  29. ctx.fill();
  30. ctx.beginPath();
  31. ctx.arc(150, 35, 50, 0, 1.8 * Math.PI);
  32. ctx.setStrokeStyle('#666666');
  33. ctx.stroke();
  34. ctx.draw();

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

  • Green: Center of circle (15, 35)
  • Red: Start radian (0)
  • Blue: End radian (1.8 * Math.PI)

bezierCurveTo

Create a cubic Bezier curve path.

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

Parameters

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

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.arc(30, 30, 2, 0, 2 * Math.PI);
  4. ctx.setFillStyle('red');
  5. ctx.fill();
  6. ctx.beginPath();
  7. ctx.arc(250, 25, 2, 0, 2 * Math.PI);
  8. ctx.setFillStyle('blue');
  9. ctx.fill();
  10. ctx.beginPath();
  11. ctx.arc(20, 100, 2, 0, 2 * Math.PI);
  12. ctx.arc(200, 100, 2, 0, 2 * Math.PI);
  13. ctx.setFillStyle('green');
  14. ctx.fill();
  15. ctx.setFillStyle('yellow');
  16. ctx.setFontSize(14);
  17. ctx.beginPath();
  18. ctx.moveTo(30, 30);
  19. ctx.lineTo(30, 100);
  20. ctx.lineTo(150, 75);
  21. ctx.moveTo(250, 30);
  22. ctx.lineTo(250, 80);
  23. ctx.lineTo(70, 75);
  24. ctx.setStrokeStyle('#EEEEEE');
  25. ctx.stroke();
  26. ctx.beginPath();
  27. ctx.moveTo(30, 30);
  28. ctx.bezierCurveTo(30, 150, 250, 150, 180, 20);
  29. ctx.setStrokeStyle('black');
  30. ctx.stroke();
  31. ctx.draw();

For moveTo(30, 30), the three key coordinates for bezierCurveTo(30, 150, 250, 150, 180, 20) are as follows:

  • Red: Start point (20, 20)
  • Blue: Two control points (20, 150) and (250, 150)
  • Green: End point (180, 20)

clip

Set the currently created path to the current clipping path.

quadraticCurveTo

Create a quadratic Bezier curve path.

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

Parameters

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

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.beginPath();
  3. ctx.arc(30, 30, 2, 0, 2 * Math.PI);
  4. ctx.setFillStyle('red');
  5. ctx.fill();
  6. ctx.beginPath();
  7. ctx.arc(250, 20, 2, 0, 2 * Math.PI);
  8. ctx.setFillStyle('blue');
  9. ctx.fill();
  10. ctx.beginPath();
  11. ctx.arc(30, 200, 2, 0, 2 * Math.PI);
  12. ctx.setFillStyle('green');
  13. ctx.fill();
  14. ctx.setFillStyle('black');
  15. ctx.setFontSize(12);
  16. ctx.beginPath();
  17. ctx.moveTo(30, 30);
  18. ctx.lineTo(30, 150);
  19. ctx.lineTo(250, 30);
  20. ctx.setStrokeStyle('#AAAAAA');
  21. ctx.stroke();
  22. ctx.beginPath();
  23. ctx.moveTo(30, 30);
  24. ctx.quadraticCurveTo(30, 150, 250, 25);
  25. ctx.setStrokeStyle('black');
  26. ctx.stroke();
  27. ctx.draw();

For moveTo(30, 30), the three key coordinates for quadraticCurveTo(30, 150, 250, 25) are as follows:

  • Red: Start point (30, 30)
  • Blue: Control point (30, 150)
  • Green: End point (250, 25)

scale

After the scale method is called, the horizontal and vertical coordinates for the path created afterwards will be scaled. If scale is called multiple times, scale levels will be multiplied.

Parameters

Parameter Type Description
scaleWidth Number Scale levels for horizontal coordinates (1 = 100%, 0.5 = 50%, 2 = 200%)
scaleHeight Number Scale levels for vertical coordinates (1 = 100%, 0.5 = 50%, 2 = 200%)

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.strokeRect(15, 15, 30, 25);
  3. ctx.scale(3, 3);
  4. ctx.strokeRect(15, 15, 30, 25);
  5. ctx.scale(3, 3);
  6. ctx.strokeRect(15, 15, 30, 25);
  7. ctx.draw();

rotate

Centered on the origin, and the origin can be modified with the translate method. Rotate the current axis clockwise. If rotate is called multiple times, the rotation angles will be added up.

Parameters

Parameter Type Description
rotate Number Rotation angle in radians (degrees * Math.PI/180; degrees ranging from 0~360)
  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.strokeRect(200, 20, 180, 150);
  3. ctx.rotate(30 * Math.PI / 180);
  4. ctx.strokeRect(200, 20, 180, 150);
  5. ctx.rotate(30 * Math.PI / 180);
  6. ctx.strokeRect(200, 20, 180, 150);
  7. ctx.draw();

translate

Transform the origin (0, 0) of the current coordinate system. The default origin of the coordinate system is the top left corner of the page.

Parameters

Parameter Type Description
x Number Settoff for horizontal coordinate
y Number Settoff for vertical coordinate

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.strokeRect(20, 20, 250, 80);
  3. ctx.translate(30, 30);
  4. ctx.strokeRect(20, 20, 250, 80);
  5. ctx.translate(30, 30);
  6. ctx.strokeRect(20, 20, 250, 80);
  7. ctx.draw();

setFontSize

Set the font size.

Parameters

Parameter Type Description
fontSize Number Font size

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFontSize(14);
  3. ctx.fillText('14', 20, 20);;;
  4. ctx.setFontSize(22)
  5. ctx.fillText('22', 40, 40)
  6. ctx.setFontSize(30);
  7. ctx.fillText('30', 60, 60);
  8. ctx.setFontSize(38);
  9. ctx.fillText('38', 90, 90);
  10. ctx.draw();

fillText

Draw the filled text on the canvas.

Parameters

Parameter Type Description
text String Text
x Number X coordinate of the top left corner of the drawn text
y Number Y coordinate of the top left corner of the drawn text

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFontSize(42)
  3. ctx.fillText('Hello', 30, 30);;
  4. ctx.fillText('alipay', 200, 200)
  5. ctx.draw();

drawImage

Draw an image and the image remains in its original size.

Parameters

Parameter Type Description
imageResource String Image resources; only support online CDN address or offline package address, and the online CDN needs to return header Access-Control-Allow-Origin: *.
x Number X coordinate of the top left corner of image
y Number Y coordinate of the top left corner of image
width Number Image width
height Number Image height

Code example

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

setGlobalAlpha

Set global brush transparency.

Parameters

Parameter Type Range Description
alpha Number 0~1 Transparency, 0 indicates completely transparent; 1 indicates opaque.

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFillStyle('yellow');
  3. ctx.fillRect(10, 10, 150, 100);
  4. ctx.setGlobalAlpha(0.2);
  5. ctx.setFillStyle('blue');
  6. ctx.fillRect(50, 50, 150, 100);
  7. ctx.setFillStyle('red');
  8. ctx.fillRect(100, 100, 150, 100);
  9. ctx.draw();

setLineDash

Set the style of dash line.

Parameters

Parameter Type Description
segments Array A set of numbers describing the length of alternately drawn line segments and spacing (units of coordinate space). If the number of array elements is odd, the array elements are copied and repeated. For example, the [5, 15, 25] will be changed to [5, 15, 25, 5, 15, 25].

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setLineDash([5, 15, 25]);
  3. ctx.beginPath();
  4. ctx.moveTo(0,100);
  5. ctx.lineTo(400, 100);
  6. ctx.stroke();
  7. ctx.draw();

transform

A method in which a matrix is superimposed multiple times on the current transformation, and the matrix is described by the parameters of the method. You can scale, rotate, move, and tilt the context.

Parameters

Parameter Type Description
scaleX Number Scale horizontally.
skewX Number Skew horizontally.
skewY Number Skew vertically.
scaleY Number Scale vertically.
translateX Number Translate horizontally.
translateY Number Translate vertically.

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.rotate(45 * Math.PI / 180);
  3. ctx.setFillStyle('red');
  4. ctx.fillRect(70,0,100,30);
  5. ctx.transform(1, 1, 0, 1, 0, 0);
  6. ctx.setFillStyle('#000');
  7. ctx.fillRect(0, 0, 100, 100);
  8. ctx.draw();

setTransform

Reset the transform and invoke the transform by unit matrix. The transform is described by the variable of the method.

Parameters

Parameter Type Description
scaleX Number Scale horizontally.
skewX Number Skew horizontally.
skewY Number Skew vertically.
scaleY Number Scale vertically.
translateX Number Translate horizontally.
translateY Number Translate vertically.

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.rotate(45 * Math.PI / 180);
  3. ctx.setFillStyle('red');
  4. ctx.fillRect(70,0,100,30);
  5. ctx.setTransform(1, 1, 0, 1, 0, 0);
  6. ctx.setFillStyle('#000');
  7. ctx.fillRect(0, 0, 100, 100);
  8. ctx.draw();

getImageData

Get the pixel data of the implicit area of the canvas.

Note: The base library with version lower than 1.10 is not supported.

Parameters

Parameter Type Required Description
x Number Yes The x coordinate of left-upper corner of the image rectangular area that need to be get.
y Number Yes The y coordinate of left-upper corner of the image rectangular area that need to be get.
width Number Yes The width of the image rectangular area that need to be gotten.
height Number Yes The height of the image rectangular area that need to be gotten.
success Function No Callback function upon call success.
fail Function No Callback function upon call failure.
complete Function No Callback function upon call completion.

Callback parameters on success

Parameter Type Description
width Number The width of the image rect area.
height Number The height of the image rect area.

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.getImageData({
  3. x: 0,
  4. y: 0,
  5. width: 100,
  6. height: 100,
  7. success(res) {
  8. console.log(res.width) // 100
  9. console.log(res.height) // 100
  10. console.log(res.data instanceof Uint8ClampedArray) // true
  11. console.log(res.data.length) // 100 * 100 * 4
  12. }
  13. })

putImageData

Draw the pixel data into the canvas.

Note: The base library with version lower than 1.11 is not supported.

Parameters

Parameter Type Required Description
data Uint8ClampedArray Yes Image pixel data, it is an array, and the four elements represent the rgba data.
x Number Yes The x offset for the original image data in the destination canvas.
y Number Yes The y offset for the original image data in the destination canvas.
width Number Yes The width of the original image data.
height Number Yes The height of the original image data.
success Function No Callback function upon call success.
fail Function No Callback function upon call failure.
complete Function No Callback function upon call completion.

Code example

  1. const data = new Uint8ClampedArray([255, 0, 0, 1])
  2. const ctx = my.createCanvasContext('awesomeCanvas');
  3. ctx.putImageData({
  4. x: 0,
  5. y: 0,
  6. width: 1,
  7. height: 1,
  8. data: data,
  9. success(res) {}
  10. })

save

Save the current drawing context.

Code example

  1. //.js
  2. const ctx = my.createCanvasContext('myCanvas')
  3. // save the default fill style
  4. ctx.save()
  5. ctx.setFillStyle('red')
  6. ctx.fillRect(10, 10, 150, 100)
  7. // restore to the previous saved state
  8. ctx.restore()
  9. ctx.fillRect(50, 50, 150, 100)
  10. ctx.draw()

restore

Restore the previously saved drawing context.

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.save();
  3. ctx.setFillStyle('red');
  4. ctx.fillRect(20, 20, 250, 80);
  5. ctx.restore();
  6. ctx.fillRect(60, 60, 155, 130);
  7. ctx.draw();

draw

Draw the description (path, transformation, style) previously existed in the drawing context onto the canvas.

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

Parameters

Parameter Type Description Lowest base library version supported
reserve Boolean Optional. Whether this drawing will follow the last drawing; that is, if the reserve parameter is false, the native layer will clear the canvas first and then continue drawing by calling drawCanvas; if the reserve parameter is true, the content on the current canvas is retained and then drawCanvas is called to override it. The default is false. -
callback Function Required, the callback function to be executed when the drawing is done. 1.10

Code example

  1. const ctx = my.createCanvasContext('awesomeCanvas');
  2. ctx.setFillStyle('blue');
  3. ctx.fillRect(20, 20, 180, 80);
  4. ctx.draw();
  5. ctx.fillRect(60, 60, 250, 120);
  6. ctx.draw(true);