By Vishal Basumatary in javascript — Mar 23, 2023

how to make a rectangle in javascript

How to Make a Rectangle in JavaScript

If you are looking to create a rectangle in JavaScript, you have a few options available to you. Below, we will explore a couple of different methods for creating rectangles in JavaScript.

Method 1: Using the Canvas Element

The first method we will look at involves using the HTML canvas element. The canvas element is used for drawing graphics on a web page, and it is supported by all modern web browsers.

Here is an example of how to create a rectangle using the canvas element:


// Get the canvas element
var canvas = document.getElementById("myCanvas");

// Get the 2D context for the canvas
var ctx = canvas.getContext("2d");

// Set the fill style to red
ctx.fillStyle = "red";

// Draw the rectangle
ctx.fillRect(10, 10, 50, 50);

document.getElementById("myCanvas"): This line of code retrieves the canvas element from the HTML document. Make sure to replace "myCanvas" with the ID of your canvas element.
canvas.getContext("2d"): This line of code retrieves the 2D context for the canvas. We will use this context to draw our rectangle.
ctx.fillStyle = "red": This line of code sets the fill style for our rectangle. You can replace "red" with any color you like.
ctx.fillRect(10, 10, 50, 50): This line of code actually draws the rectangle on the canvas. The first two parameters specify the x and y coordinates of the top-left corner of the rectangle, and the last two parameters specify the width and height of the rectangle.

Method 2: Using CSS

The second method we will look at involves using CSS to create a rectangle. This method is simpler than using the canvas element, but it may not be as flexible.

Here is an example of how to create a rectangle using CSS:


// Get the div element
var div = document.getElementById("myDiv");

// Set the width and height of the div
div.style.width = "50px";
div.style.height = "50px";

// Set the background color to red
div.style.backgroundColor = "red";

document.getElementById("myDiv"): This line of code retrieves the div element from the HTML document. Make sure to replace "myDiv" with the ID of your div element.
div.style.width = "50px": This line of code sets the width of the div to 50 pixels.
div.style.height = "50px": This line of code sets the height of the div to 50 pixels.
div.style.backgroundColor = "red": This line of code sets the background color of the div to red. You can replace "red" with any color you like.

As you can see, using CSS is simpler than using the canvas element, but it may not be as flexible. If you need to create more complex shapes or add animations to your shapes, the canvas element may be a better choice.