Drawing Tool Using JavaScript 2022 | JavaScript Project Tutorial with Source Code.

Dear friends in this article we will tell you How to make Drawing Tool Using JavaScript 2022?. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to the search bar and type article name then you can find easily more interested articles.

In this tutorial we have listed three languages ​​like html, css, javascript.

First of all, we have to create an html file, set the title inside it, then after that take the div tag in the body and give it a class, save the class name as canvas.

Something like this.

      <div class="canvas">
    <div class="toolbar">
      <input type="color" aria-label="select pen color" value="#ff0000">
      <input class="range" type="range" min="2" max="50" value="10" aria-label="select pen size">
      <span class="output">10</span>
      <button>CLEAR</button>
      <h1>Drawing Tool Using JavaScript</h1>
    </div>

    <canvas class="myCanvas">
      <p>Add suitable fallback here.</p>
    </canvas>
</div>

Now we have to design this drawing tool, for that we will create css file and include it in html file so that we can target multiple classes.

First of all, we will design the canvas of the drawing tool, give it full width and full height, then design the buttons, then design the range. After that we will design the color picker and then set it. Something like this.

body {
      overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #ccc;
  }

  .toolbar {
    display: flex;
    background: #ccc;
    padding: 5px;
  }
  .toolbar input{
    margin-left: 50px;
    width: 100px;
    height: 50px;
  }
  input.range{
    margin-left: 20px;
    margin-top: 10px;
    width: 200px;
    height: 30px;
    background-color: red;
  }
  .toolbar span{
    margin-top: 5px;
    margin-left: 8px;
    font-size: 30px;
    font-weight: bold;
    font-family: verdana;
  }
  .toolbar button{
    margin-left: 20px;
    outline: none;
    border: none;
    background-color: yellow;
    font-weight: bold;
    font-family: sans-serif;
    margin-top: 5px;
    border-radius: 15px;
    width: 100px;
    height: 40px;
    box-shadow: inset 0 0 13px #000000c4;
  }
 .toolbar h1{
    position: absolute;
    right: 58px;
    top: -13px;
    font-size: 45px;
    font-family: fantasy;
    letter-spacing: 3px;
 }

Now we have to use JavaScript to run the drawing tool so that we can draw anything as per our wish and we can use it as a drawing. Copy the JavaScript code given below and paste it in your project.

const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight-85;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

const colorPicker = document.querySelector('input[type="color"]');
const sizePicker = document.querySelector('input[type="range"]');
const output = document.querySelector('.output');
const clearBtn = document.querySelector('button');

// covert degrees to radians
function degToRad(degrees) {
  return degrees * Math.PI / 180;
};

// update sizepicker output value

sizePicker.addEventListener('input', () => output.textContent = sizePicker.value);

// store mouse pointer coordinates, and whether the button is pressed
let curX;
let curY;
let pressed = false;

// update mouse pointer coordinates
document.addEventListener('mousemove', e => {
  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
});

canvas.addEventListener('mousedown', () => pressed = true);

canvas.addEventListener('mouseup', () => pressed = false);

clearBtn.addEventListener('click', () => {
  ctx.fillStyle = 'rgb(0,0,0)';
  ctx.fillRect(0,0,width,height);
});

function draw() {
  if (pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();

Watch Video Related this Article.