HTML5 canvas provides drawing pictures on canvas, which can draw some parts of the image and increase or decrease the size of the image.

Drawing method

//Draw a picture in (x, y) of the canvas
context.drawImage(img, x, y);

//Draw a picture in (x, y) of the canvas and set the width and height
context.drawImage(img, x, y, width, height);

//Cut the image and draw the image in (x, y) of the canvas
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

/ / parameter
//img: Specifies the image, canvas, or video to use.
//sx: optional. The X coordinate position where the cut starts.
//sy: optional. The Y coordinate position of the start cut.
//swidth: optional. The width of the cut image.
//sheight: optional. The height of the cut image.
//x: place the X coordinate position of the image on the canvas.
//y: place the Y coordinate position of the image on the canvas.
//width: optional. The width of the image to use. (stretch or shrink image)
//height: optional. The height of the image to use. (stretch or shrink image)

When we use the stroke method to draw the outgoing line, we can also control the line style through some methods.

Specific setting parameters:

//Sets or returns the end style of the line
//butt: default. Add a straight edge to each end of the line.
//round: adds a round cap to each end of the line.
//square: adds a square cap to each end of the line.
context.lineCap="butt|round|square";

//Sets or returns the corner type created when two lines intersect
//bevel: creates a bevel.
//round: creates a fillet.
//miter: default. Create sharp corners.
context.lineJoin="bevel|round|miter";

//Sets or returns the current line width
//Number: the width of the current line in pixels.
context.lineWidth=number;

//Set or return the maximum miter length
//number: positive. Specifies the maximum miter length. If the miter length exceeds the value of miterlimit, the corners are displayed as "bevel" type of linejoin.
context.miterLimit=number;

By creating a gradient object and assigning it to the context before drawing the figure, the color gradient effect can be achieved. The gradient effect can be used to fill rectangle, circle, line, text, etc.

Gradients in HTML5 canvas are divided into linear gradients and radial gradients (also known as diffusion gradients). Related methods:

//Create a linear gradient
//x0: X coordinate of the start point of the gradient
//y0: Y coordinate of the starting point of the gradient
//x1: X coordinate of gradient end point
//y1: Y coordinate of gradient end point
context.createLinearGradient(x0,y0,x1,y1);

//Create a radial gradient
//X coordinate of the starting circle of the gradient
//Y coordinate of the starting circle of the gradient
//Radius of start circle
//X coordinate of the end circle of the gradient
//Y coordinate of the end circle of the gradient
//Radius of end circle
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

//Increase the color and stop position in the specified gradient object
//Stop: a value between 0.0 and 1.0, indicating the position between the beginning and end of the gradient.
//Color: CSS color value displayed at the end
gradient.addColorStop(stop, color);

The gradient object created by createlineargradient and createradialgradient must use the addcolorstop() method to specify different colors and where to locate the colors in the gradient object.

In the previous article on drawing, only the default color (black) is used when drawing paths and filling paths. ​

If you want to color graphics, there are two important attributes that you can do.

//Sets or returns the color, gradient, or mode used to fill the paint.
//color: indicates the CSS color value for the fill color of the drawing. The default value is × 000000.
//gradient: gradient object (linear or radioactive) used to fill a drawing
//pattern: pattern object used to fill a drawing
context.fillStyle=color|gradient|pattern;

//Sets or returns the color, gradient, or mode used for strokes.
//color: indicates the CSS color value for the fill color of the drawing. The default value is × 000000.
//gradient: gradient object (linear or radioactive) used to fill a drawing
//pattern: pattern object used to fill a drawing
context.strokeStyle=color|gradient|pattern;

//There are many forms of filling with color:

//1. Fill with color string
context.fillStyle = "red";

//2. Fill with hexadecimal digit string
context.fillStyle = "#FF0000";

//3. Fill with hexadecimal digit string shorthand
context.fillStyle = "#F00";

//4. Use RGB color mode to set color
context.fillStyle = "rgb(255,0,0)";

//5. Use RGBA color mode to set the color. It is based on RGB color mode, and has more parameters to control alpha transparency. The value range is from 1 (opaque) to 0 (transparent).
context.fillStyle = "rgba(255,0,0,1)";

//6. Use HSL color mode to set the color, which is a representation of the points in RGB color model in cylindrical coordinate system. HSL is the color representing the three channels of hue (H), saturation (s), and lightness (L).
context.fillStyle = "hsl(0,100%,50%)";

//7. Use HSLA color mode to set the color. It is based on HSL color mode, and has more parameters to control alpha transparency. The value range is from 1 (opaque) to 0 (transparent).
context.fillStyle = "hsla(0,100%,50%,1)";

HTML5 canvas provides two ways to render text.

Related methods:

//Fills the specified text in the specified (x, y) position
//text: Specifies the text to output on the canvas.
//x: the X coordinate position (relative to the canvas) at which the text starts to be drawn.
//y: the Y coordinate position (relative to the canvas) at which the text starts to be drawn.
//maxWidth: optional. Maximum text width allowed in pixels.
context.fillText(text, x, y, maxWidth);

//Draws a text border at the specified (x, y) position
//text: Specifies the text to output on the canvas.
//xX: the X coordinate position (relative to the canvas) at which the text starts to be drawn.
//y: the Y coordinate position (relative to the canvas) at which the text starts to be drawn.
//maxWidth: optional. Maximum text width allowed in pixels.
context.strokeText(text, x, y, maxWidth);