Drawing Basic Shapes: Rectangles

This tutorial explains how to draw rectangles using JavaScript Canvas. We'll cover different methods and properties to customize the appearance and position of rectangles.

Getting Started with Canvas

First, we need to create a <canvas> element in our HTML:

<canvas id="myCanvas" width="500" height="300"></canvas>

Then, in our JavaScript, we need to get a reference to the canvas and its 2D rendering context:

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

ctx is the object we use to draw shapes and apply styles to the canvas.

Drawing Rectangles: fillRect()

The simplest way to draw a filled rectangle is using the fillRect() method. It takes four arguments:

• x: The x-coordinate of the top-left corner of the rectangle.
• y: The y-coordinate of the top-left corner of the rectangle.
• width: The width of the rectangle.
• height: The height of the rectangle.

Example:

 ctx.fillRect(50, 50, 100, 80); // Draws a black rectangle 

Let's add the javascript code to fillRectCanvas

 const fillRectCanvas = document.getElementById('fillRectCanvas');
const fillRectCtx = fillRectCanvas.getContext('2d');
fillRectCtx.fillRect(50, 50, 100, 80); 

Drawing Rectangles: strokeRect()

To draw only the outline of a rectangle, use the strokeRect() method. It also takes the same four arguments as fillRect():

• x: The x-coordinate of the top-left corner of the rectangle.
• y: The y-coordinate of the top-left corner of the rectangle.
• width: The width of the rectangle.
• height: The height of the rectangle.

Example:

 ctx.strokeRect(170, 50, 100, 80); // Draws a rectangle outline 

Let's add the javascript code to strokeRectCanvas

 const strokeRectCanvas = document.getElementById('strokeRectCanvas');
const strokeRectCtx = strokeRectCanvas.getContext('2d');
strokeRectCtx.strokeRect(170, 50, 100, 80); 

Drawing Rectangles: rect() and fill()/stroke()

A more flexible approach involves using the rect() method to define the rectangle and then using fill() or stroke() to actually draw it. rect() also takes the same four arguments as the previous methods:

• x: The x-coordinate of the top-left corner of the rectangle.
• y: The y-coordinate of the top-left corner of the rectangle.
• width: The width of the rectangle.
• height: The height of the rectangle.

Example:

 ctx.rect(290, 50, 100, 80);
ctx.fillStyle = 'red';
ctx.fill(); // Draws a red filled rectangle 

Let's add the javascript code to rectCanvas

 const rectCanvas = document.getElementById('rectCanvas');
const rectCtx = rectCanvas.getContext('2d');
rectCtx.rect(290, 50, 100, 80);
rectCtx.fillStyle = 'red';
rectCtx.fill(); 

This approach is more versatile because you can define multiple shapes before filling or stroking them, creating more complex drawings.

Customizing Rectangle Appearance

You can customize the appearance of rectangles using properties like:

• fillStyle: Sets the fill color (e.g., 'red', '#FF0000', 'rgb(255, 0, 0)').
• strokeStyle: Sets the stroke color (e.g., 'blue').
• lineWidth: Sets the width of the stroke (in pixels).
• globalAlpha: Sets the transparency of the fill and stroke (0.0 is fully transparent, 1.0 is fully opaque).

Example:

 ctx.fillStyle = 'rgba(0, 200, 0, 0.5)'; // Semi-transparent green
ctx.strokeStyle = 'purple';
ctx.lineWidth = 5;
ctx.fillRect(50, 150, 100, 80);
ctx.strokeRect(170, 150, 100, 80); 

Let's add the javascript code to customRectCanvas

 const customRectCanvas = document.getElementById('customRectCanvas');
const customRectCtx = customRectCanvas.getContext('2d');
customRectCtx.fillStyle = 'rgba(0, 200, 0, 0.5)'; // Semi-transparent green
customRectCtx.strokeStyle = 'purple';
customRectCtx.lineWidth = 5;
customRectCtx.fillRect(50, 150, 100, 80);
customRectCtx.strokeRect(170, 150, 100, 80); 

Clearing the Canvas

To clear the canvas, use the clearRect() method. It takes the same four arguments as the rectangle drawing methods:

• x: The x-coordinate of the top-left corner of the rectangle to clear.
• y: The y-coordinate of the top-left corner of the rectangle to clear.
• width: The width of the rectangle to clear.
• height: The height of the rectangle to clear.

To clear the entire canvas, use:

 ctx.clearRect(0, 0, canvas.width, canvas.height); 

Let's add the javascript code to clearRectCanvas. We will draw a rectangle and clear a part of it.

 const clearRectCanvas = document.getElementById('clearRectCanvas');
const clearRectCtx = clearRectCanvas.getContext('2d');

// Draw a rectangle
clearRectCtx.fillStyle = 'orange';
clearRectCtx.fillRect(50, 50, 200, 150);

// Clear a portion of the rectangle
clearRectCtx.clearRect(75, 75, 150, 100);