Canvas Overview

createOffscreenCanvas

TIP

The API usage is as follows: OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)

• Functional description: Create an off-screen canvas instance.
• Parameters and descriptions:

  • number width: Canvas width.

  • number height： Canvas height.

  • object this： Under a custom component, this of the current component instance.

  • object object

    Properties	Type	Default value	Required	Description
    type	string	webgl	No	Off-screen canvas type created
    width	number	-	No	Canvas width.
    height	number	-	No	Canvas height.
    compInst	Component	-	No	Under a custom component, this of the current component instance.

    • object.type

    Legal value	Description
    webgl	webgl type context
    2d	2d type context

createCanvasContext

TIP

The API usage is as follows: CanvasContext wx.createCanvasContext(string canvasId, Object this)

• Functional description: Creating a canvas drawing context canvasContext Object

• Parameters and descriptions:

  • string canvasId To get the context's <canvas> component canvas-id attribute.
  • Object this： Under a custom component, this of the current component instance, which means to search for a <canvas> with canvas-id under this custom component. If omitted, it will not be searched in any custom component.

• Return value: canvasContext。

canvasToTempFilePath

TIP

The API usage is as follows: wx.canvasToTempFilePath(Object object, Object this)

• Functional description: Export the content of the specified area of

• Parameters and descriptions: Object object。

  Properties	Type	Default value	Required	Description
  x	number	0	No	The upper left corner horizontal coordinate of the specified canvas area
  y	number	0	No	The upper left corner vertical coordinate of the specified canvas area
  width	number	Canvas width - x	No	The width of the specified canvas area
  height	number	Canvas height - y	No	The height of the specified canvas area
  destWidth	number	width*screen pixel density	No	The width of the output image
  destHeight	number	height*screen pixel density	No	The height of the output image
  canvasId	string	-	Yes	Canvas ID, canvas-id passed to the <canvas> component
  fileType	string	png	No	The type of the target file
  quality	number	-	Yes	The quality of the image, currently only valid for jpg. The value range is (0, 1], and it is treated as 1.0 when it is not in the range.
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

  • Legal values

    Value	Description
    jpg	jpg image
    png	png image

  • res callback result of Object.success

    Value	Type	Description
    tempFilePath	string	Temporary path for generated files (local path)

• Sample code:

wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
  }
})

canvasPutImageData

TIP

The API usage is as follows: wx.canvasPutImageData(Object object, Object this)

• Functional description: Draw pixel data to the canvas. In custom components, the second parameter is passed to the custom component instance this to operate the canvas component in the component.

• Parameter1 : Object object。

  Properties	Type	Default value	Required	Description
  canvasId	string	-	Yes	Canvas ID, passed to the canvas-id attribute of the <canvas> component
  data	Uint8ClampedArray	-	Yes	Image pixel data, one-dimensional array, each four items represent the rgba of a pixel
  x	number	-	Yes	Position offset of the source image data in the target canvas (offset in the x-axis direction)
  y	number	-	Yes	Position offset of the source image data in the target canvas (offset in the y-axis direction)
  width	number	-	Yes	Width of the rectangular area of
  height	number	-	Yes	Height of the rectangular area of
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

  • Parameter2 ： Object this，In custom components, this of the current component instance is used to operate the <canvas> component in the component.。

• Sample code:

const data = new Uint8ClampedArray([255, 0, 0, 1])
wx.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  data,
  success(res) {}
})

canvasGetImageData

TIP

The API usage is as follows: wx.canvasGetImageData(Object object, Object this)

• Functional description: Get the pixel data implicit in the canvas area.

• Parameter1: Object object。

  Properties	Type	Default value	Required	Description
  canvasId	string	-	Yes	Canvas ID, passed into the canvas-id attribute of the <canvas> component
  x	number	-	Yes	The upper left corner horizontal coordinate of the image data rectangle area to be extracted
  y	number	-	Yes	The upper left corner vertical coordinate of the image data rectangle area to be extracted
  width	number	-	Yes	The width of the image data rectangle area to be extracted
  height	number	-	Yes	The height of the image data rectangle area to be extracted
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

  • object.success callback function parameters: ： Object res。

    Properties	Type	Description
    width	number	The width of the image data rectangle
    height	number	The height of the image data rectangle
    data	Uint8ClampedArray	Image pixel data, one-dimensional array, each four items represent the rgba of a pixel

  • Parameter2 ： Object this，In custom components, this of the current component instance is used to operate the <canvas> component in the component.。

• Sample code:

wx.canvasGetImageData({
  canvasId: 'myCanvas',
  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
  }
})

Image

• Functional description: Picture objects

• Parameters and descriptions:

  Properties	Type	Description
  src	string	The URL of the image
  width	number	The actual width of the image
  height	number	The actual height of the image
  referrerPolicy	string	origin: send a full referrer; no-referrer: do not send. The format is fixed as https://servicewechat.com/{appid}/{version}/page-frame.html, where {appid} is the appid of the mini program, and {version} is the version number of the mini program. Version number 0 indicates the development version, trial version, and audit version, version number devtools indicates the developer tools, and the rest are official versions;
  onload	function	Callback function triggered after the image is loaded
  onerror	function	Callback function triggered after an error occurs in image loading

ImageData

• Functional description: ImageData object

• Parameters and descriptions:

  Properties	Type	Description
  width	number	Use pixels to describe the actual width of ImageData
  height	number	Use pixels to describe the actual height of ImageData
  data	Uint8ClampedArray	One-dimensional array containing data in RGBA order, and the data is represented by integers from 0 to 255 (inclusive)

canvasGradient

• Functional description: Gradient object

.addColorStop

TIP

The API usage is as follows: CanvasGradient.addColorStop(number stop, Color color)

• Functional description: Add color gradient points. The part smaller than the minimum stop will be rendered according to the color of the minimum stop, and the part larger than the maximum stop will be rendered according to the color of the maximum stop, which is equivalent to CanvasGradient.addColorStop(number stop, Color color).
  Parameter1： number stop, Indicates the position between the start and end of the gradient, ranging from 0-1.
  Parameter2: Color color The color of the gradient point.

• Sample code:

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

RenderingContext

• Functional description: Canvas drawing context
  • The CanvasRenderingContext2D object can be obtained through the Canvas.getContext('2d') interface, which implements HTML Canvas 2D Context Defined properties and methods.
  • The WebGLRenderingContext object can be obtained through the Canvas.getContext('webgl') or OffscreenCanvas.getContext('webgl') interface, which implements WebGL 1.0 All properties, methods, and constants defined.

For more information, please see canvasContext。

OffscreenCanvas

For more information, please see OffscreenCanvas。

Path2D

For more information, please see Path2D。

Canvas

For more information, please see Canvas。

Color

For more information, please see Color。