askvity

How Do I Add a Rectangle to Canvas?

Published in HTML Canvas Drawing 4 mins read

To add or draw a rectangle directly onto a canvas in HTML, you typically use the fillRect() or strokeRect() methods provided by the canvas rendering context.

Drawing rectangles on a canvas involves using the 2D rendering context, which is accessed via canvas.getContext('2d'). This context object provides various methods for drawing shapes, including rectangles.

Using fillRect() for Solid Rectangles

The fillRect() method draws a solid, filled rectangle. This is one of the most common ways to both create and render a rectangle in one step.

How it Works

The fillRect() method takes four arguments:

  1. x: The x-coordinate of the rectangle's starting point (usually the top-left corner).
  2. y: The y-coordinate of the rectangle's starting point (usually the top-left corner).
  3. width: The width of the rectangle.
  4. height: The height of the rectangle.

The fill color can be set using the fillStyle property of the context before calling fillRect().

Example

const canvas = document.getElementById('myCanvas'); // Get your canvas element
const ctx = canvas.getContext('2d'); // Get the 2D rendering context

// Set the fill color
ctx.fillStyle = 'blue';

// Draw a blue rectangle starting at (10, 10) with width 100 and height 50
ctx.fillRect(10, 10, 100, 50);

This code snippet will add a solid blue rectangle to the canvas.

Using strokeRect() for Outlined Rectangles

The strokeRect() method draws an outlined (hollow) rectangle. Like fillRect(), it allows you to both create and render a rectangle in one step.

How it Works

The strokeRect() method also takes four arguments:

  1. x: The x-coordinate of the rectangle's starting point.
  2. y: The y-coordinate of the rectangle's starting point.
  3. width: The width of the rectangle.
  4. height: The height of the rectangle.

The line color and thickness can be set using the strokeStyle and lineWidth properties of the context before calling strokeRect().

Example

const canvas = document.getElementById('myCanvas'); // Get your canvas element
const ctx = canvas.getContext('2d'); // Get the 2D rendering context

// Set the stroke color and width
ctx.strokeStyle = 'red';
ctx.lineWidth = 2; // Set line thickness to 2 pixels

// Draw a red outlined rectangle starting at (150, 10) with width 100 and height 50
ctx.strokeRect(150, 10, 100, 50);

This code snippet will add a red outlined rectangle to the canvas.

Parameters Overview

Here's a quick look at the parameters for fillRect() and strokeRect():

Parameter Description Type
x The x-coordinate of the starting point. number
y The y-coordinate of the starting point. number
width The width of the rectangle. number
height The height of the rectangle. number

Drawing Rectangles Using Paths (rect(), fill(), stroke())

While fillRect() and strokeRect() are convenient for simple rectangles, you can also define a rectangle as part of a path using the rect() method and then render it using fill() or stroke(). As the reference notes, to draw the rectangle onto a canvas, you can use the fill() or stroke() methods. These methods render the current path.

How it Works

  1. ctx.beginPath(): Start a new path.
  2. ctx.rect(x, y, width, height): Add a rectangle to the current path. This doesn't draw anything yet.
  3. ctx.fill(): Fill the current path (the rectangle) with the fillStyle.
  4. ctx.stroke(): Stroke the current path (the outline of the rectangle) with the strokeStyle and lineWidth.

Example

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a filled green rectangle using path methods
ctx.fillStyle = 'green';
ctx.beginPath(); // Start a new path
ctx.rect(10, 70, 100, 50); // Add rectangle to the path
ctx.fill(); // Fill the path

// Draw a stroked black rectangle using path methods
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.beginPath(); // Start another new path
ctx.rect(150, 70, 100, 50); // Add rectangle to the path
ctx.stroke(); // Stroke the path

This method is useful when combining rectangles with other shapes or paths before rendering. However, for simply drawing a single solid or outlined rectangle, fillRect() and strokeRect() are more direct and efficient.

In summary, the easiest way to add a rectangle to a canvas is using fillRect() for a solid rectangle or strokeRect() for an outlined one, as these methods handle both defining and drawing the shape in one step.

Related Articles