Draw a filled-in rectangle

ctx.fillRect(, , , );

The fillRect() function creates a new path with a closed subpath. The subpath has four points connected by straight lines.

The first point is the top left corner of the rectangle at (000, 000).

The next three points are the top right corner, bottom right corner, and bottom left corners of the rectangle. The rectangle has a width of 000 and a height of 000.

The path is filled using the current fill style.

Draw the outline of a rectangle

ctx.strokeRect(, , , );

The strokeRect() function creates a new path with a closed subpath. The subpath has four points connected by straight lines.

The first point is the top left corner of the rectangle at (000, 000).

The next three points are the top right corner, bottom right corner, and bottom left corners of the rectangle. The rectangle has a width of 000 and a height of 000.

The path is stroked using the current stroke and line styles.