The Canvas component provides a drawing interface on top of which you can draw arbitrarily. All drawings in Canvas must be done in 'JavaScript'.

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

const ctx = ft.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

1. Use the canvas

1.1 Creates a Canvas drawing context

First, we need to create a Canvas drawing context, the CanvasContext.
CanvasContext is a built-in object in the Mini App that has some methods for drawing:

const ctx = ft.createCanvasContext('myCanvas')

1.2 Use the Canvas drawing context for drawing description

Next, let's describe what we want to draw in the Canvas.
Set the fill color of the drawing context to red:

Draw a rectangle with the fillRect(x, y, width, height) method, filled with the red color you just set:

ctx.fillRect(10, 10, 150, 75)

1.3 Draw

Tell the canvas component that you want to draw the description you just described: