Create your own paint web application

What is canvas API?

The Canvas API (Canvas) is used to produce 2D and 3D images and drawings with JavaScript and HTML. It's also used for video and picture editing, as well as gaming. Canvas is typically used for 2D drawing, whereas WebGL API is mostly utilized for 3D rendering.

Development

In this example we will create:

A drawing board
Integrate pen tool
Color change for pen

HTML:

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.

<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

What is canvas API?

Development

HTML:

Javascript:

Adding a toolbar-

Demo: