# Operating system for this tutorial: Windows 10 system, Dell G3 computer. The
- ##width and height attributes: used to specify the width and height of the canvas, either by setting the attribute value or through JavaScript to modify dynamically.
- getContext('2d') method: By calling this method, you can obtain a 2D drawing environment (context), and then you can use the drawing method provided by the environment to draw. A commonly used drawing context is '2d'.
- Drawing methods: The drawing context provides a series of methods for drawing graphics, such as fillRect() (drawing a filled rectangle), strokeRect() (drawing a border rectangle), arc() (Draw an arc) etc.
- Fill and stroke styles: You can use fillStyle and strokeStyle properties to set the fill and stroke styles of graphics, which can be color values, gradient objects, or pattern objects.
- Path: Use paths to define complex graphics, such as straight lines, curves, arcs, etc. The creation and operation of paths include using beginPath() to start a new path, moveTo() to move to a specified point, lineTo() to draw a line to connect two points, arcTo() to create an arc, etc.
- Gradient: The drawing context provides methods for creating linear gradients and radial gradients, such as createLinearGradient() and createRadialGradient(), which can be used to set fill and stroke gradients. Effect.
- Picture drawing: Use the drawImage() method to draw pictures onto the canvas.
These are just examples. The
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
