Quick Apps

# canvas

A canvas to draw graphics.

Canvas on a Quick App

(Example code)

# Children Elements

This element doesn't support children elements.

# Attributes

In addition to the common attributes, this element may contain the following attributes.

# id

Attribute that indicates the identifier of the element. This attribute is mandatory.

  • Type: string
  • Default value: -
  • Mandatory: yes

# disable-scroll

Attribute that indicates if the gesture events are bound to the canvas, users are allowed to scroll on the page or pull down to refresh data (when interacting with the canvas).

  • Type: boolean
  • Default value: false
  • Mandatory: no

# CSS Properties

This element supports the common styles.

# Events

In addition to the common events, this element supports the following events:

# longtap

This event is triggered when a user touches the screen for 500 ms. Once this event is triggered, scrolling is prevented.

# error

This event is triggered when an error happens.

Additional parameters:

  • { errMsg: string }. Reason of the error.

# Example

<template>
  <div class="container">
    <div class="mlr-container mt-item">
      <canvas id="canvas" class="canvas bro-l"></canvas>
    </div>
    <div class="mt-btn row-center">
      <text class="btn-transparent" onclick="drawPath">Draw close path</text>
    </div>
    <div class="btn-transparent row-center">
      <text class="btn-transparent" onclick="drawFont">Draw font</text>
    </div>
  </div>
</template>

<style lang="sass">
  .canvas {
    height: 400px;
    background-color: #fff;
  }
</style>

<script>
  module.exports = {
    drawPath() {
      let canvas = this.$element('canvas');
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,3000,3000);
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(250, 50)
      ctx.lineTo(250, 300)
      ctx.lineTo(450, 300)
      ctx.closePath()
      ctx.stroke();
    },
    drawFont() {
      let canvas = this.$element('canvas');
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,3000,3000);
      ctx.font = '50px';
      ctx.fillText("Hello World",200,200);
    }
  }
</script>

← marquee →