HtmlHow-ToBeginner · 3 min read

How to Draw Rectangle on Canvas in HTML5

To draw a rectangle on a canvas, use the fillRect(x, y, width, height) method of the canvas 2D context. This method fills a rectangle starting at coordinates (x, y) with the specified width and height.

📐

Syntax

The main method to draw a filled rectangle on a canvas is fillRect(x, y, width, height). Here:

x: The horizontal position where the rectangle starts.
y: The vertical position where the rectangle starts.
width: How wide the rectangle is.
height: How tall the rectangle is.

This method fills the rectangle with the current fill color.

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 20, 150, 100);

💻

Example

This example shows a blue rectangle drawn on a canvas. The rectangle starts 10 pixels from the left and 20 pixels from the top, with a width of 150 pixels and height of 100 pixels.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Draw Rectangle on Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 20, 150, 100);
  </script>
</body>
</html>

Output

A 300x200 pixel canvas with a blue rectangle starting at (10,20) that is 150 pixels wide and 100 pixels tall, with a black border around the canvas.

⚠️

Common Pitfalls

Common mistakes when drawing rectangles on canvas include:

Not getting the 2D context with getContext('2d') before drawing.
Forgetting to set fillStyle or strokeStyle before drawing, resulting in default black color.
Using coordinates or sizes that are outside the canvas bounds, so the rectangle is not visible.
Confusing fillRect (fills a rectangle) with strokeRect (draws only the border).

Example of wrong and right usage:

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Wrong: no fillStyle set, rectangle will be black by default
ctx.fillRect(10, 10, 100, 50);

// Right: set fillStyle before drawing
ctx.fillStyle = 'red';
ctx.fillRect(120, 10, 100, 50);

📊

Quick Reference

Here is a quick summary of rectangle drawing methods on canvas:

Method	Description
fillRect(x, y, width, height)	Draws a filled rectangle with current fill color.
strokeRect(x, y, width, height)	Draws only the outline of a rectangle with current stroke color.
clearRect(x, y, width, height)	Clears the specified rectangle area, making it transparent.

✅

Key Takeaways

Use fillRect(x, y, width, height) to draw filled rectangles on canvas.

Always get the 2D context with getContext('2d') before drawing.

Set fillStyle to choose the rectangle color before drawing.

Coordinates and sizes must fit inside the canvas to be visible.

Use strokeRect for outlines and clearRect to erase areas.