# OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)

Start from base library version 2.16.1. Please remaining backward compatible.

with Promise style call: Not supported

Mini Program plugin: Support, need to Mini Program base library version no less than 2.16.1

Create Off Screen canvas Example

# parameter

# object object

attribute type Default values Required Introductions
type string webgl no Create off-screen canvas type
width number no Canvas width
height number no Canvas height
compInst Component no Under a custom component, the current component instance this

object.type Legal value

value Introductions Minimum version
webgl Webgl type context
2d 2d type context

# Return value

# OffscreenCanvas

# sample code


  // Create Off Screen 2D canvas Example
  const canvas = wx.createOffscreenCanvas({type: '2d', width: 300, height: 150})
  // Obtain context。 Note that this must be consistent with the type Agreement
  const context = canvas.getContext('2d')

  // Create a picture
  const image = canvas.createImage()
  // Waiting for the picture to load
  await new Promise(resolve => {
    image.onload = resolve
    image.src = IMAGE_URL // Images to load url
  })

  // Draw pictures off screen canvas on
  context.clearRect(0, 0, 300, 150)
  context.drawImage(image, 0, 0, 300, 150)

  // Get data after painting
  const imgData = context.getImageData(0, 0, 300, 150)

# Off-screen Canvas Type not interchangeable

Because webgl canvas and 2d canvas The underlying implementation of the. wx.createOffscreenCanvas Specifies the type ahead of time.

Type specified, off screen canvas getContext(type) Call is not allowed to be mixed, such as the webgl canvas call getContext('2d')

Same, different types. canvas call createImage Create a picture object does not support mixed use, please pay attention to use as much as possible canvas Self createImage Create a picture object.

# and MediaRecorder Combination

Off-screen webgl canvas Support passed as a parameter wx.createMediaRecorder, Off-screen 2d canvas Not yet.

# old version createOffscreenCanvas

The old function is signed as wx.createOffscreenCanvas(width: number, height: number, this: object): OffscreenCanvasFrom the base library 2.7.0 Start support

From base library 2.16.1 To start with wx.createOffscreenCanvas(options: object): OffscreenCanvas, downwardly compatible with the older version. Note, however, that older entries can only create webgl Type, if you want to create 2d Type must use the new version.