tencent cloud

All product documents
Tencent Cloud Super App as a Service
Canvas Overview
Last updated: 2025-03-20 18:01:56
Canvas Overview
Last updated: 2025-03-20 18:01:56

createOffscreenCanvas

This API is used via OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this).
Feature Description: Creates an instance of an offscreen canvas.
Parameter and Description:
number width: The width of the canvas.
number height: The height of the canvas.
object this: this of the current component instance under Custom Components
Object object
Attribute
Type
Default value
Required
Description
type
string
webgl
No
Type of created offscreen canvas
width
number

No
Canvas Width
height
number

No
Canvas Height
compInst
Component

No
"This" of the current component instance in the context of custom components
Object.type
Legal value
Description
webgl
Webgl type context
2d
2d type context

createCanvasContext

This API is used via CanvasContext wx.createCanvasContext(string canvasId, Object this).
Feature Description: Creates a canvasContext object for canvas drawing context.
Parameter and Description:
string canvasId: The canvas-id attribute of the <canvas> component for which the context is to be obtained.
Object this: In the context of custom components, "this" signifies the search for the <canvas> possessing the canvas-id within this custom component. If omitted, the search will not be conducted within any custom components.
Return Value: canvasContext.

canvasToTempFilePath

This API is used via wx.canvasToTempFilePath(Object object, Object this).
Feature Description: Exports the content of a specified area on the current canvas, generating an image of a specified size. Calling this method within the draw() callback ensures successful image export.
Parameter and Description: Object.
Attribute
Type
Default value
Required
Description
x
number
0
No
Horizontal coordinate of the top left corner of the specified canvas area
y
number
0
No
Vertical coordinate of the top left corner 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 multiplied by screen pixel density.
No
The width of the output image.
destHeight
number
Height multiplied by screen pixel density.
No
The height of the output image.
canvasId
string
-
Yes
Canvas identifier, canvas-id passed into the <canvas> component.
fileType
string
png
No
Type of the target file.
quality
number
-
Yes
The quality of the image, currently only effective for jpg. The value range is (0, 1]. If not within the range, it is treated as 1.0.
success
function
-
No
Callback Function of Successful Interface Call
fail
function
-
No
Callback Function of Failing Interface Call
complete
function
-
No
Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations)
Valid values of object.fileType
Value
Description
jpg
JPG image
png
PNG image
Result of res callback for object.success
Attribute
Type
Description
tempFilePath
string
Temporary path to the generated file (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

This API is used via wx.canvasPutImageData(Object object, Object this).
Feature Description: Draws pixel data onto the canvas. In the context of a custom component, the second parameter passes in the custom component instance "this", to manipulate the canvas component in the component.
Parameter 1: Object.
Attribute
Type
Default value
Required
Description
canvasId
string
-
Yes
Canvas identifier, the attribute of the canvas-id passed into the <canvas> component.
data
Uint8ClampedArray
-
Yes
Image pixel data, a one-dimensional array, with every four items representing the RGBA of a pixel.
x
number
-
Yes
The position offset of the source image data in the target canvas (offset in the x-axis direction).
y
number
-
Yes
The position offset of the source image data in the target canvas (offset in the y-axis direction).
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
Callback Function of Successful Interface Call
fail
function
-
No
Callback Function of Failing Interface Call
complete
function
-
No
Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations)
Parameter 2: Object this, under the custom component, the current component instance's this, to operate within the <canvas> 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

This API is used via wx.canvasGetImageData(Object object, Object this).
Feature Description: Gets the implicit pixel data from the canvas area.
Parameter 1: Object.
Attribute
Type
Default value
Required
Description
canvasId
string
-
Yes
Canvas identifier, the attribute of the canvas-id passed into the component <canvas>.
x
number
-
Yes
The horizontal coordinate of the top-left corner of the rectangular area of the image data to be extracted.
y
number
-
Yes
The vertical coordinate of the top-left corner of the rectangular area of the image data to be extracted.
width
number
-
Yes
The width of the top-left corner of the rectangular area of the image data to be extracted.
height
number
-
Yes
The height of the top-left corner of the rectangular area of the image data to be extracted.
success
function
-
No
Callback Function of Successful Interface Call
fail
function
-
No
Callback Function of Failing Interface Call
complete
function
-
No
Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations)
Parameters for object.success callback function: Object res.
Attribute
Type
Description
width
number
The width of the image data rectangle.
height
number
The height of the source image data rectangle.
data
Uint8ClampedArray
Image pixel data, a one-dimensional array, with every four items representing the RGBA of a pixel.
Parameter 2:Object this, under Custom Components, this of the current component instance to manipulate <canvas> components within the component.
The parameter of the object.success callback function: Object this, "this" of the current component instance under custom components, used to operate the <canvas> component within.
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

Feature Description: Image object.
Parameter and Description
Attribute
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: Sends the complete referrer; no-referrer: Not to send. The format is fixed as https://servicewechat.com/{appid}/{version}/page-frame.html, where {appid} is the appid of the mini program, {version} is the version number of the mini program. A version number of 0 indicates a development version, trial version, or review version. A version number of devtools indicates a developer tool, and the rest are official versions.
onload
function
Callback function triggered upon the completion of image loading
onerror
function
Callback function triggered when an error occurs during image loading

ImageData

Feature Description: ImageData object.
Parameter and Description
Attribute
Type
Description
width
number
Describe the actual width of ImageData using pixels.
height
number
Describe the actual height of ImageData using pixels.
data
Uint8ClampedArray
A one-dimension array containing data in RGBA order, represented by integers ranging from 0 to 255 (inclusive).

canvasGradient

Feature Description: Gradient object.

.addColorStop

This method is used via CanvasGradient.addColorStop(number stop, Color color).
Feature Description: Adds a gradient point of color. Parts less than the minimum stop value will be rendered according to the color of the minimum stop value, and parts greater than the maximum stop value will be rendered according to the color of the maximum stop value, equivalent to CanvasGradient.addColorStop(number stop, Color color).
Parameter 1: number stop, indicating the position between the start and end of the gradient, range from 0 to 1.
Parameter 2: 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

Feature Description: Canvas drawing context.
The CanvasRenderingContext2D object can be obtained through the Canvas.getContext('2d') interface, implementing the properties and methods defined by the HTML Canvas 2D Context.
The WebGLRenderingContext object can be obtained through the Canvas.getContext('webgl') or OffscreenCanvas.getContext('webgl') interface, implementing all properties, methods, and constants defined by WebGL 1.0.

CanvasContext

For more details, see canvasContext.

OffscreenCanvas

For more details, see OffscreenCanvas.

Path2D

For more details, see Path2D.

Canvas

For more details, see Canvas.

Color

For more details, see Color.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 available.

7x24 Phone Support