How to create a canvas drawing tool with vanilla JavaScript

By the end of this tutorial, you will be able to draw different shapes of different colors. Take a look at the final working demo below. Feel free to fork and play around with it!

<br />

HTML structure

The HTML Structure will consist of the following components:

Here is the HTML structure (as ever, to simplify the process) using Bootstrap.

 class="container d-flex justify-content-center align-items-center mt-5">
   class="row">
    Drawing Tool
  

 class="container d-flex justify-content-center align-items-center">
   class="row mt-5">
     class="col-md-4 col-sm-6 col-8">
       class="mb-3 d-flex justify-content-center align-items-center">
         for="tool">Tool:
         id="tool" class="form-control">
           value="rectangle">Rectangle
           value="freehand">Freehand
           value="circle">Circle
           value="eraser">Eraser
        
      
       class="mb-3 d-flex justify-content-center align-items-center">
         for="drawcolor">Color:
         type="color" id="drawcolor" name="drawcolor" value="#00FFFF" class="form-control" />
      
    
     class="col-md-8">
       width="600" height="450">
    
  


For the canvas, we are setting a custom width and height with .

The custom setting defines the size and will also ensure that the drawing area is appropriately scaled and allows for precise control over the dimensions of the canvas.

Styling with CSS

Add the following custom styles:

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
body {
  background-color: rgb(247, 248, 249);
   font-family: "DM Mono", monospace;
}
canvas {
  border: 1px solid rgb(33, 32, 32);
  border-radius: 10px;
  background-color: #fff;
  cursor: crosshair;
}
h1{
  font-weight:600;
}

The custom styles feature a custom Google font, a border, a border radius to the canvas element, and a white background color.

JavaScript functionality

Start by getting the canvas element

1	const canvas = document.querySelector("canvas");

Next, create a 2D context object which will allow us to draw in the canvas. The 2D context object contains methods for drawing on the canvas.

1	ctx = canvas.getContext("2d", { willReadFrequently: true });

Define some initial variables:

1	let isDrawing = false;
2	let startX = 0;
3	let startY = 0;
4	let initialImageData;

isDrawing : this variable will keep track of when the canvas is being drawn on.

startX is the initial point on the X axis on the canvas where any drawing will start.

startY is the initial point on the y axis on the canvas where any drawing will start.

initialImageData is used to keep a copy of how the canvas looked before any drawing begins. It’s also useful for preventing trails when new shapes are drawn.

Add event listeners to get the selected color and tool:

selectTool = document.getElementById("tool");

let currentTool = selectTool.value;

selectedColor = document.getElementById("drawcolor");
let color = selectedColor.value;

selectedColor.addEventListener("input", () => {
  color = selectedColor.value;
});

selectTool.addEventListener("change", () => {
  currentTool = selectTool.value;
});

Next, add an event listener to the canvas on the mousedown event. The mousedown event will invoke the startDrawing() function.

1	canvas.addEventListener("mousedown", startDrawing);

Create the called startDrawing() function which will look like this:

function startDrawing(e) {
  ctx.lineWidth = 5;
  startX = e.offsetX;
  startY = e.offsetY;
  isDrawing = true;
  ctx.beginPath();

  ctx.fillStyle = color;
  ctx.strokeStyle = color;
  initialImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}

In the code above, on the mousedown event , we will use the linewidth() method provided by the 2D context object to set a custom size for the drawing line width in pixels.

isDrawing = true; sets the IsDrawing value to true to signify that the drawing has started.

startX = e.offsetX; will set the value of startX to the x-coordinate of the mouse pointer.

startY = e.offsetY; will set the value of startY to the y-cordinate of the mouse pointer.

ctx.beginPath(); beginPath () is a 2D context method which begins a new path. In this case, a new path will be started at the intersection of startX and startY.

ctx.fillStyle = color; will set the color used to fill the drawing

ctx.strokeStyle = color; sets the selected color as the stroke color.

Next, add an event listener to the canvas on the mousemove event. The mousemove event will invoke the Drawing() function.

1	canvas.addEventListener("mousemove", drawing);

When the user moves the mouse, create a function called drawing which will first check for the isDrawing condition, if its not true, the function will exit.

1	function drawing(e) {
2	if (!isDrawing) return;
3	}

If the isDrawing condition is happening, we will use conditions to check the current selected tool and update appropriately. We will create case switch statements for each of the following tools:

freehand

circle

triangle

eraser

function drawing(e) {
  if (!isDrawing) return;


  switch (currentTool) {
    case "freehand":
      //  use  freehand tool
      break;

    case "rectangle":
      //  draw rectangle
      break;

    case "circle":
      //  draw circle
      break;

    case "eraser":
      //erase
      break;

    default:
      break;
  }
}

For the freehand tool, update the function as shown below:

 function drawing(e) {
    if (!isDrawing) return;  
    switch (currentTool) {
      case "freehand":
        ctx.moveTo(startX, startY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        startX = e.offsetX;
        startY = e.offsetY;
        break;
        // rest of the code
}}

When the freehand tool is selected, we will do the following:

ctx.moveTo(startX, startY); will move the drawing cursor to the starting point

ctx.lineTo(e.offsetX, e.offsetY); will add a line from the starting point to the current mouse position

ctx.stroke(); will draw the line path with the selected color.

startX = e.offsetX; and startY = e.offsetY; will reset the starting points.

When the rectangle is selected, update the function as follows:

 function drawing(e) {
    if (!isDrawing) return;
    ctx.putImageData(initialImageData, 0, 0);
  
    switch (currentTool) {
      case "freehand":
        ctx.moveTo(startX, startY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        startX = e.offsetX;
        startY = e.offsetY;
        break;
  
      case "rectangle":
        const width = e.offsetX - startX;
        const height = e.offsetY - startY;
        ctx.fillRect(startX, startY, width, height);
        ctx.beginPath();
        break;
}}

const width = e.offsetX - startX; The width is obtained by the difference between the start position, represented by startX and the currrent x-cordinate of the mouse pointer.

const height = e.offsetY - startY; To get the height, we get the difference between the start position, represented by startY and the currrent y-cordinate of the mouse pointer.

ctx.fillRect(startX, startY, width, height); the fillRect() method will draw a filled rectangle. This method takes in parameters in the order provided.

To draw a circle, we first need to get the circle’s radius, we will then use the .arc() method to draw a curve to the specified path. The .arc() method has the following syntax.

1	context.arc(x, y, r, startAngle, endAngle, counterclockwise)

where

x and y are the x and y-coordinate of the center of the circle

r is the radius of the circle, which is calculated by the distance from the center to any point in the circumference of the circle. To get the radius of the circle, we will use the Pythagoras theorem

startAngle is the angle at which the path starts, measured in radians. In the context of a circle, this is typically set to 0, indicating the starting point of the path

endAngle is the angle at which the path ends in radians. It is obtained by 2*PI (corresponds to 360 degrees)

Let’s get the radius using the Pythagoras theorem.

1	const radius = Math.sqrt(
2	(e.offsetX - startX) 2 + (e.offsetY - startY) 2
3	);

Now if we substitute our values in the .arc() method, the code for drawing a circle will look like this:

function drawing(e) {
  if (!isDrawing) return;
  ctx.putImageData(initialImageData, 0, 0);

  switch (currentTool) {
    case "freehand":
      ctx.moveTo(startX, startY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      startX = e.offsetX;
      startY = e.offsetY;
      break;

    case "rectangle":
      const width = e.offsetX - startX;
      const height = e.offsetY - startY;
      ctx.fillRect(startX, startY, width, height);
      ctx.beginPath();
      break;

    case "circle":
      const radius = Math.sqrt(
        (e.offsetX - startX) ** 2 + (e.offsetY - startY) ** 2
      );
      ctx.beginPath();
      ctx.arc(startX, startY, radius, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      break;

  
  }
}

Finally, for the eraser tool, update the function as follows:

function drawing(e) {
  if (!isDrawing) return;
  ctx.putImageData(initialImageData, 0, 0);

  switch (currentTool) {
    case "freehand":
      ctx.moveTo(startX, startY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      startX = e.offsetX;
      startY = e.offsetY;
      break;

    case "rectangle":
      const width = e.offsetX - startX;
      const height = e.offsetY - startY;
      ctx.fillRect(startX, startY, width, height);
      ctx.beginPath();
      break;

    case "circle":
      const radius = Math.sqrt(
        (e.offsetX - startX) ** 2 + (e.offsetY - startY) ** 2
      );
      ctx.beginPath();
      ctx.arc(startX, startY, radius, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      break;

    case "eraser":
      ctx.strokeStyle = "#fff";
      ctx.moveTo(startX, startY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      startX = e.offsetX;
      startY = e.offsetY;
      break;

    default:
      break;
  }
}

The erase functionality is similar to the freehand tool, except that it uses the color white to cover any previous colors.

The last functionality is the stopDrawing() function which happens on mouseup event which will look like this;

canvas.addEventListener("mouseup", stopDrawing);
function stopDrawing(e) {
  isDrawing = false;
  ctx.closePath();
}

On the mouseup event, drawing should stop and the current path should be closed. This is to ensure that no further drawing operations occur until a new mousedown event occurs.

The ctx.closePath() method is used to close the current path, ensuring that the shape being drawn is finalized.

Final demo

Let’s remind ourselves what we have built! Here is the demo:

<br />

Conclusion

This tutorial has covered how to create a drawing app with Vanilla JavaScript. You can further enhance this app by adding features such as the ability to save drawings, custom brush sizes, different shapes and tools, and so on.

Source link

Hosting Discounts

cloudways Discount
August 21, 2022
Hostinger Discount
August 21, 2022
DreamHost Discount
August 31, 2020