Examples of drawing rectangles in HTML5 Canvas_html5 tutorial tips

This article is translated from Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”.

Let’s take a look at the simple geometric shape built into Canvas—the drawing of a rectangle. In Canvas, there are three ways to draw a rectangle: fill (fillRect), stroke (StrokeRect) and clear (clearRect). Of course, we can also use "path" to describe all graphics including rectangles.

The following are the APIs of the above three methods:

1.fillRect(x,y,width,height). Draw a solid rectangle starting at (x, y), with width width and height height.
2.strokeRect(x,y,width,height). Draw a rectangular box starting from (x, y), with width as width and height as height. The rectangular box will be rendered in different styles according to the currently set strokeStyle, lineWidth, lineJoin and miterLimit properties.
3.clearRect(x,y,width,height). Clear the rectangular area starting from (x, y) with width width and height to make it completely transparent.

Before calling the above method to draw the Canvas, we need to set the fill and stroke styles. The most basic way to set these styles is to use 24-bit colors (represented as hexadecimal strings). The following is a simple example:

Copy the code

The code is as follows:

context. fillStyle = "#000000";
context.strokeStyle = "#ff00ff";

In the example below, the fill color is set to black and the stroke color is set to purple :

Copy code

The code is as follows:

function drawScreen() {
context.fillStyle = "#000000";
context.strokeStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40);
context .strokeRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

The code execution result is as shown below: