# canvas

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

Canvas. 2.9.0 Support a new set of Canvas 2D Interface to specify type Property, and supports Same-layer rendering, the original interface is no longer maintained. Related api:Obtain canvas Example。

attribute	type	Default value	Required	Introductions	Minimum version
type	string		no	Designation canvas Type, Support 2d (2.9.0) and webgl (2.7.0)	2.7.0
canvas-id	string		no	canvas Unique identifier for the component, if specified type You do not need to specify the attribute again	1.0.0
disable-scroll	boolean	false	no	When canvas Disable screen scrolling and pull - down refresh when you move in the	1.0.0
Bind touch start	eventhandle		no	Finger touch action begins.	1.0.0
bindtouchmove	eventhandle		no	Move after finger touch	1.0.0
Binding touch	eventhandle		no	Finger touch is over	1.0.0
bindtouchcancel	eventhandle		no	Finger touch action is interrupted, such as call reminder, pop-up	1.0.0
bindlongtap	eventhandle		no	Long finger press 500ms Moving after a long press event will not trigger screen scrolling.	1.0.0
binderror	eventhandle		no	Triggered when an error occurs error Event, detail = {errMsg}	1.0.0

# Bug & Tip

tip：canvas Label default width 300px, height 150px
tipOn the same page canvas-id Not repeatable, if using an already existing Canvas-id, the canvas The corresponding canvas will be hidden and will no longer work properly
tipPlease note that Native component usage limits
tipDefaulted in developer tools GPU Hardware acceleration can be turned on in the developer tool settings for "hardware acceleration" enhancement WebGL Rendering performance
tip: WebGL Support adopted getContext('webgl', { alpha: true }) Get a canvas with a transparent background
tip: Canvas 2D (new interface) requires explicit canvas width and height settings, default:300*150, maximum:1365*1365
bug: Avoid setting too high width and height. There will be crash problems with Android.
tip: iOS Temporary support pointer-events

# Canvas 2D sample code

Preview with Developer Tool

  <!-- canvas.wxml -->
  <canvas type="2d" id="myCanvas"></canvas>

// canvas.js
Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = nothing[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = nothing[0].width * dpr
        canvas.height = nothing[0].height * dpr
        ctx.scale(dpr, dpr)

        ctx.fillRect(0, 0, 100, 100)
      })
  }
})

# WebGL sample code

Preview with Developer Tool

  <!-- canvas.wxml -->
  <canvas type="webgl" id="myCanvas"></canvas>

// canvas.js
Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas').node().exec((res) => {
      const canvas = nothing[0].node
      const Gl = canvas.getContext('webgl')
      Gl.clearColor(1, 0, 1, 1)
      Gl.clear(Gl.COLOR_BUFFER_BIT)
    })
  }
})

# Sample code (old interface)

Preview with Developer Tool to download

<!-- canvas.wxml -->
<canvas style="width: 300px height: 200px" canvas-id="firstCanvas"></canvas>
<!-- When absolute positioning is used, the canvas Is higher than the previous display level canvas -->
<canvas style="width: 400px height: 500px" canvas-id="secondCanvas"></canvas>
<!-- because canvas-id With the previous one canvas Repeat, the canvas Does not display, and sends an error event to the AppService -->
<canvas style="width: 400px height: 500px" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>

Page({
  canvasIdErrorCallback: function (e) {
    console.error(and.detail.errMsg)
  },
  onReady: function (e) {
    // Use  wx.createContext Get the drawing context context
    where context = wx.createCanvasContext('firstCanvas')

    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  }
})