Create your own paint web application - HTML Canvas API

By Gyanendra Kumar Knojiya
Sep 27, 2021 7:58 PM

What is canvas API?

Canvas API is used to create 2D or 3D graphics and drawing using javascript and HTML (<Canvas>). It is also used for gaming, animation, video, photo editing. Canvas is primarily used for 2D drawing, whereas WebGL API is used for 3D.

Start using canvas:

In this example we will create:

A drawing board
Integrate pen tool
Color change for pen

HTML:

1. Create an HTML boilerplate and add a canvas tag with id canvas. Set its height and width. Also, add your javascript file using the script tag in the last of the body section.

That's it. Our canvas is ready to draw. Now, we need to add tools for our canvas using javascipt.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <canvas id="canvas" width="500px" height="500px">
</canvas>
    <script src="./index.js"></script>
  </body>
</html>

Javascript:

We have created an index.js file and added it to an HTML file. In this file, we going to add canvas logic for drawing different kinds of tools. Initially, we are going to start with a simple pen tool.

To do that, we need to create a reference for canvas using javascript.

let canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

The whole idea behind the pen tool is to capture the path of the mouse when the mouse key is pressed. So for that, we can use onmousedown event listener. We will create a variable like -

let isDrawing = false;

when the user presses the mouse key, then we will set its value to true. and again when the user releases the key, we will set its value to false. So overall, when the mouse key down, then isDrawing will be true.

When the user presses the mouse key, we will capture the position of the mouse and start drawing. We can set line width using lineWidth in pixels and line color using strokeStyle.

canvas.onmousedown = (e) => {
  isDrawing = true;
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.moveTo(e.layerX, e.layerY);
};

Now, when the user is moving their mouse and isDrawing is set to true, will create a line for every point and give a stroke. So that a path of many lines will be created.

canvas.onmousemove = (e) => {
  if (isDrawing) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
};

When the user releases their mouse key, onmouseup event will be executed. And isDrawing will be set to false. That means drawing of the line will be stopped.

So, we have created our first canvas. we can also create a toolbar to change the line color. for that, we need to add a color selection button in the HTML file. In the javascript file, we will add a color variable. When the user clicks the color change button, we will add a listener and change the color variable value accordingly.

Adding a toolbar-

  
  <button onclick=setPenColor('red') >Red</button>
  <button  onclick=setPenColor('black') >Black</button>

Adding a penColor variable and setPenColor function to change penColor value-

let penColor="red";

const setPenColor=(color)=>{
  penColor= color;
}

Adding strokeStyle to change the color of pen:

canvas.onmousedown = (e) => {
  isDrawing = true;
  ctx.strokeStyle = penColor;
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.moveTo(e.layerX, e.layerY);
};

That's all, we have completed our canvas app.

Demo:

You can get all code from https://github.com/gyanendraknojiya/simple-canvas-example or for demo visit https://gyanendraknojiya.github.io/simple-canvas-example

If you have any queries, feel free to contact me https://gyanendra.tech/#contact

Share this post

Join us on

Telegram
Facebook
Portfolio