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);

The previous article said that rectangle is the only native drawing method provided by HTML5 canvas, which is not entirely true, because Google browser provides the method of drawing ellipse.

Draw ellipse

Drawing method:

//Draw ellipse
//x: X axis coordinate of the center of the ellipse.
//y: Y coordinate of the center of the ellipse.
//radiusX: radius of the major axis of the ellipse.
//radiusY: radius of the minor axis of the ellipse.
//rotation: the angle of rotation of the ellipse in radians (non angular degrees).
//startAngle: the angle of the starting point to be drawn, measured from the X axis, in radians (non angle degrees).
//endAngle: the angle of the end point at which the ellipse will be drawn, in radians (non angle degrees).
//anticlockwise: optional. If it is true, draw the ellipse anticlockwise, and vice versa.
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

All graphics need to be drawn by path, while HTML5 canvas supports a kind of native graphics drawing - rectangle, and only supports this kind.

How to draw a rectangle:

//Create rectangle
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.rect(x, y, width, height)

//Draw a filled rectangle
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.fillRect(x, y, width, height)

//Draw a rectangular border
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.strokeRect(x, y, width, height)

//Clears the specified rectangular area, which then becomes completely transparent.
//x: X coordinate of the upper left corner of the rectangle
//y: Y coordinate of the upper left corner of the rectangle
//width: the width of the rectangle in pixels
//height: the height of the rectangle in pixels
context.clearRect(x, y, width, height);