What is canvas?
<canvas> element itself has no drawing ability. It is only a container of graphics. We must use scripts to complete the actual drawing task.
Create canvas element
Add the canvas element to the HTML 5 page and specify the ID, width, and height of the element:
<canvas id="myCanvas" width="200" height="200"> <p>Your browser does not support canvas! </p> </canvas>
id to find the
Then, create the
getContext("2d") objects are built-in HTML5 objects, which have many ways to draw paths, rectangles, circles, characters and add images.
Next, draw a red rectangle in two lines of code:
It is dyed red by
fillStyle method, and the shape, position and size are specified by fillRect method.
Understanding of coordinates
fillRect method in the code has parameters
(0,0150,75). This means drawing a
150x75 rectangle on the canvas, starting at the top left corner
As shown in the following figure, the X and Y coordinates of the canvas are used to locate the painting on the canvas.