The Canvas component provides a drawing UI. You can use this component as follows:
Specify canvas-id ="myCanvas" to identify a unique canvas, which is used to obtain the canvas object.
Specify type to define the canvas type. In this example, type is set to 2d.
<!-- Specify a 2d canvas. --> <canvas canvas-id="myCanvas" type="2d" style="border: 1px solid; width: 300px; height: 150px;" />
Use createCanvasContext to select the specified canvas to obtain its context.
Subsequent canvas and rendering operations need to be processed by using this object context.
let canvas = has.createCanvasContext('myCanvas'); // ID input to the HXML file You can draw elements on the canvas by using a drawing API of the rendering context.
canvas.fillRect(10, 10, 50, 50); canvas.draw();