My understanding of Canvas

FillRect (x,y,width,height) draws a fill rectangle

2. StrokeRect (x,y,width,height) draws a rectangle border

3. ClearRect (x,y,width,height) Clears the specified rectangle area to make the clearing part completely transparent. Each of the methods provided above contains the same parameters. X and y specify the coordinates of the upper-left corner (relative to the origin) of the rectangle drawn on the Canvas canvas. Width and height set the size of the rectangle

Four API:

1.beginPath()

2.closePath()

3.stroke()

4.fill()

From this code, the steps to use canvas are as follows: 1. Use canvas in HTML, determine its length and width,

2. Get the canvas canvas in js code with id, let canvas = document.getelement (“canvas”)

3. After retrieving the canvas, let CTX = Canvas. GetContext (“2d”);

4. Start the canvas: ctx.beginPath() and redraw

5. Move the brush to the axis position moveTo

6. Draw the axis lineTo() from the beginning of the brush to the input parameters

7. To draw a triangle, draw two lines and use closePath () to close the rest

8. Use stroke() again (fill() instead of 7,8)

Set the color API: fillStyle = color Sets the fill color of the graphic. StrokeStyle = color Sets the color of the shape outline. Set transparency ctx.globalalpha = 0.2;