Draw Rectangle on Mouse & Touch Events – JavaScript Canvas

In this tutorial, I will guide you on how to draw rectangles on Mouse and Touch Events on Canvas. This is a step-by-step guide on JavaScript Canvas rectangle drawing to make you understand what actually happens in each part of the code.
Table of Contents:
- What is Canvas?
- Three Ways to Draw Rectangle on Canvas
- How to Draw Rectangles using Mouse and Touch Events?
- Calculate Drawing Coordinates from Event Object
- Calculate the Start Position Coordinates for Rectangle
- Calculate the End Position Coordinates for Rectangle
- Draw Rectangle using Calculated Width and Height
- Clear Canvas and Undo Rectangle Drawing
- Stop Drawing Rectangle on Mouse Up and Touch End Events
- CodePen Demo – Rectangle Drawing
What is Canvas?
Canvas is an element that acts as a container, Imagine it as a plain board. Canvas itself is not a drawing container, you can only draw shapes by accessing the context API in JavaScript by using getContext('2d')
that returns the reference to the 2D context inside the canvas.
<canvas id="drawContainer" width="1000" height="1000"
style="border: 1px solid #333"></canvas>
It’s important for a canvas element to have width and height attributes defined in HTML. If you change the canvas width and height by using CSS width and height properties, the canvas will only scale up and down (not recommended).
Three Ways to Draw Rectangle on Canvas
To draw any shapes on Canvas, we should get the 2d context of the canvas.
const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
To draw rectangles on Canvas, there are three canvas methods available:
1. Draw a Rectangle using Context.rect method
Using Context.rect
we can draw a rectangle but we have to call the fill()
and stroke()
methods to make the rectangle visible with background and borders.
context.strokeStyle = "brown"; // add blue color to the border
context.lineWidth = 10; // increase the border width
context.fillStyle = "orange"; // add background color to shape
context.rect(50, 50, 200, 200); // configure rectangle coordinates, width and height
context.stroke(); // drawing of bordered rectangle
context.fill(); // drawing of background in rectangle
2. Draw a Rectangle using Context.fillRect method
Using Context.fillRect
, you can draw a rectangle with background color filled. It internally calls the fill()
method to add background to the rectangle shape.
context.fillStyle = "red"; // add background color
context.fillRect(300, 50, 200, 200); // configure rectangle coordinates, width and height
3. Draw a Rectangle using Context.strokeRect method
Using Context.strokeRect
, you can draw a rectangle with stroked border color. It internally calls stroke()
method to add stroke/border color to the rectangle shape.
context.strokeStyle = "green"; // add border color
context.strokeRect(550, 50, 200, 200); // draw rectangle with border only



All the rectangle drawing methods have common parameters: x
, y
, width
, and height
.
X
– the x coordinate of the canvas to define where the rectangle shape should start drawing in the horizontal place.Y
– the y coordinate of the canvas to define where the rectangle shape should start drawing in the vertical placewidth
– The width of the rectangle in pixels.height
-The height of the rectangle in pixels.
Let’s dive into how to draw the rectangle using mouse events.
How to Draw Rectangles using Mouse and Touch Events?
We are going to use the following events for drawing rectangles on the canvas.
mousedown
– triggered by clicking the mouse button.mousemove
– triggered whenever you move the mouse.mouseup
– triggered when you release the mouse button.touchstart
– triggered by touching the canvas.touchmove
– triggered whenever you move your finger on the screen.touchend
– triggered when you release the touch.
Here’s a full code on how to draw a rectangle in javascript canvas using mouse and touch events
const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
let isDrawStart = false;
let startPosition = {x: 0, y: 0};
let endPosition = {x: 0, y: 0};
const getClientOffset = (event) => {
const {pageX, pageY} = event.touches ? event.touches[0] : event;
const x = pageX - canvasEle.offsetLeft;
const y = pageY - canvasEle.offsetTop;
return {
x,
y
}
}
const drawRectangle = (width, height) => {
context.beginPath();
context.strokeStyle = "brown";
context.lineWidth = 10;
context.fillStyle = "orange";
context.rect(startPosition.x, startPosition.y, width, height);
context.stroke();
context.fill();
}
const clearCanvas = () => {
context.clearRect(0, 0, canvasEle.width, canvasEle.height);
}
const mouseDownListener = (event) => {
startPosition = getClientOffset(event);
isDrawStart = true;
}
const mouseMoveListener = (event) => {
if(!isDrawStart) return;
endPosition = getClientOffset(event);
const width = endPosition.x - startPosition.x;
const height = endPosition.y - startPosition.y;
clearCanvas();
drawRectangle(width, height);
}
const mouseupListener = (event) => {
isDrawStart = false;
}
canvasEle.addEventListener('mousedown', mouseDownListener);
canvasEle.addEventListener('mousemove', mouseMoveListener);
canvasEle.addEventListener('mouseup', mouseupListener);
canvasEle.addEventListener('touchstart', mouseDownListener);
canvasEle.addEventListener('touchmove', mouseMoveListener);
canvasEle.addEventListener('touchend', mouseupListener);
Let’s dig dive into what’s happening in each part of the code to get a clear understanding of the concept behind the drawing.
Declare 3 variables at the start of the file:
let isDrawStart = false;
let startPosition = {x: 0, y: 0};
let endPosition = {x: 0, y: 0};
isDrawStart
– A boolean to check if the drawing has started bymousedown
event or not. The mouseMove event triggers too often, so we are using this boolean to detect whether we can draw or not.startPosition
– ThestartPosition
variable holds the value of the starting position of the drawing. Onmousedown
event, we are going to update the x and y values as objects to this variable.endPosition
– TheendPosition
variable holds the value of the end position of the drawing. Onmouseup
event, we are going to update x and y values as objects to this variable by detecting where we end up the drawing in the canvas
Listen for Mouse and Touch Events
canvasEle.addEventListener('mousedown', mouseDownListener);
canvasEle.addEventListener('mousemove', mouseMoveListener);
canvasEle.addEventListener('mouseup', mouseupListener);
canvasEle.addEventListener('touchstart', mouseDownListener);
canvasEle.addEventListener('touchmove', mouseMoveListener);
canvasEle.addEventListener('touchend', mouseupListener);
In the above code, We are listening for all the events and adding relevant event listener functions for the events as well. We are going to use the same relevant functions for mouse and touch events. For example, mousedown
and touchstart
are doing the same thing that is to trigger the handler function on the touch/mouseclick of the DOM so we are using the mouseDownListener
function.
Calculate the Drawing Coordinates of Rectangle Shape
const getClientOffset = (event) => {
const {pageX, pageY} = event.touches ? event.touches[0] : event;
const x = pageX - canvasEle.offsetLeft;
const y = pageY - canvasEle.offsetTop;
return {
x,
y
}
}
The getClientOffset
function is used to get the exact coordinates of x
and y
axis when the user clicks or touches the JavaScript canvas. To detect the exact location of the x
and y
axis in the canvas element, we should subtract pageX
and pageY
of the mouse event or touch events with the canvas element offsetLeft
and offsetTop
.
The pageX
and pageY
are the horizontal and vertical coordinates of the mouse click/touch. The offsetLeft
and offsetTop
returns the left and the top position in pixels relative to the nearest parent. In our example, it’s relative to the body since we don’t have any wrapper around our HTML canvas element.
Calculate the Starting Coordinates on Mouse Down Event
const mouseDownListener = (event) => {
startPosition = getClientOffset(event);
isDrawStart = true;
}
The mouseDownListener
function will be triggered on the mousedown
event. It calculates the starting position coordinates by triggering our reusable coordinate calculator function getClientOffset
with the event object as a parameter and returns the x and y coordinates as an object. We are storing the value in the startPosition
variable.
We are making isDrawStart
to true to let other functions know that drawing has started.
Calculate the End Position Coordinates on Mouse Move Event
const mouseMoveListener = (event) => {
if(!isDrawStart) return;
endPosition = getClientOffset(event);
const width = endPosition.x - startPosition.x;
const height = endPosition.y - startPosition.y;
clearCanvas();
drawRectangle(width, height);
}
The mouseMoveListener
is attached as a handler function for mousemove
and touchmove
events. At the very start of the function, we are checking if the drawing is started or not by using the isDrawStart
variable.
If isDrawStart
is false, we return from the function. If isDrawStart
is true, we are calculating the end position of the rectangle coordinates by using our getClientOffset
function and store the returning x and y coordinates object in endPosition
variable.
To calculate the width and height for the rectangle, we are subtracting the end position of x and y with the start position of x and y we stored on the mouse down event.
The next step is to draw the rectangle using the drawRectangle
method with proper width and height using our coordinates.
Draw Rectangle Using Calculated Width and Height
const drawRectangle = (width, height) => {
context.beginPath();
context.strokeStyle = "brown";
context.lineWidth = 10;
context.fillStyle = "orange";
context.rect(startPosition.x, startPosition.y, width, height);
context.stroke();
context.fill();
}
The drawRectangle
method accepts calculated width and height as parameters. Using the startPosition
x, and y coordinates and calculated width and height from the mousemove
event, we are defining where the rectangle drawing should happen. The strokeStyle
and fillStyle
properties are used to add the border and background color for the rectangle.
In the above example, I have used the context.rect(x, y, width, height)
method to draw rectangles. We can also do the same by using context.fillRect(x, y, width, height)
or context.strokeRect(x, y, width, height)
based on our requirement on what type of rectangle we need.
Clear JavaScript Canvas and Remove Rectangle Drawing
const clearCanvas = () => {
context.clearRect(0, 0, canvasEle.width, canvasEle.height);
}
In the mousemove
event listener function we have invoked the clearCanvas()
method that works as an eraser and clears the entire canvas by using the context.clearRect(x, y, width, height)
method.
If you want multiple rectangles to be drawn on a canvas, you can comment or remove clearCanvas()
method from mousemove
event listener function.
Stop Drawing a Rectangle on Mouse Up and Touch End Events
const mouseupListener = (event) => {
isDrawStart = false;
}
To stop drawing the rectangle, we set the isDrawStart
to false when the user leaves the mouse or touch screen. so that further mouse move (touch move) events will not execute the drawing.
CodePen Demo – Draw Rectangle on Mouse Events Demo
See the Pen
Draw Rectangle in Canvas on Mouse Events – ProDevHub.com by Nithya Rajan (@bearnithi)
on CodePen.0
Conclusion
You May Also Like: JavaScript Canvas – Draw a Line in canvas using Mouse and Touch events
In this detailed step-by-step guide on drawing rectangles, we have covered three different ways to draw rectangles on canvas, and also we learned how we can make use of mouse events and draw the rectangle by calculating the width and height of the rectangle from the coordinates x and y of the event object. I hope this helps to solve your problem, If you are stuck or need any help regarding this implementation, feel free to comment here.