DEV Community

loading...
Cover image for Day-22 Drawing App

Day-22 Drawing App

Sabiya Tabassum
Aspiring to be a full stack Developer. Currently learning React. Doing 50Projects50days Challenge.
・4 min read

Hi Folks,

Before diving into the project, a little bit of introduction about me:

I am Sabiya Tabassum. I completed my B.Tech under CSE major. I'm currently learning React and recently, I have started 50 Projects 50 Days challenge. If you have any queries/ ideas to collaborate with me, you can connect with me at my social media handles.

Coming to our Drawing App Project, Let's dive into it!!
Wohoo

Glimpse of the output of our project:

From the above image, we can get an idea that there is a canvas to draw. And a toolbox to increase or to decrease the thickness, a color input to change the color of the stroke and a clear button to clear the canvas.

Tech stack we are using: HTML,CSS, JS

πŸ“ŒHTML code:

<body>
   <canvas class="canvas" id="canvas" width="600" 
   height="500"></canvas>
  <div class="toolbox" id="toolbox">
     <button class="decrement">-</button>
     <span id="size" class="size">10</span>
     <button class="increment">+</button>
     <input type="color" class="color" />
     <button class="clear" id="clear">X</button>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Detailed Explanation of HTML code:

  • From the output, we can get a clear idea that we need a canvas. Add width and height attributes to the canvas.
  • For the toolbox, we create a called toolbox in which we have buttons for decrement and increment. Also take a span tag for size class which indicates the thickness of the line/stroke.
  • Add a button containing a clear class to clear the canvas.
  • πŸ“ŒCSS code:

   @import url("https://fonts.googleapis.com/css2? 
   family=Roboto:wght@400;700&display=swap");
 * {
      box-sizing: border-box;
   }
 body {
      background-color: #f5f5f5;
      font-family: "Roboto", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
   }
 canvas {
      border: 4px solid steelblue;
   }
 .toolbox {
     background-color: rgb(62, 138, 201);
     width: 606px;
     height: 60px;
     display: flex;
     border: 2px solid rgb(25, 141, 236);
     padding: 10px 20px;
     }
  .toolbox > * {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin: 4px;
     padding: 10px;
     font-size: 1.8rem;
     background-color: #fff;
     border: 0;
     cursor: pointer;
     width: 40px;
     height: 39px;
     margin-top: -2px;
  }
 .toolbox > *:last-child {
     margin-left: auto;
     background-color: red;
     color: white;
   }

Detailed explanation of CSS code:

  • For Centering of elements: Add properties like,
    • display:flex - To lay a collection of items out in one direction or another.
    • align-items:center - Centering the items.
    • justify-content:center - Aligns the flexible container's items to center.
    • height:100vh - The page's overall height
    • overflow: hidden - This property makes the page unscrollable.
  • For styling the canvas:
    • Add a border property.
  • For styling the toolbox:
    • Specify the width and height for the toolbox.
    • Add background-color and padding, margin properties as ur wish.
  • The .toolbox > * {} means:
    • The children in the parent toolbox class gets effected to the styles that we write into these parentheses column.
  • The .toolbox > *:last-child{} means:
    • The last child only gets effected to the styles that we write into these parentheses.
  • Atlast, you can add some media queries for responsiveness 😊

πŸ“ŒJS code:

  const canvas = document.querySelector(".canvas");
  const incrementBtn = document.querySelector(".increment");
  const decrementBtn = document.querySelector(".decrement");
  const colorEl = document.querySelector(".color");
  const clearEl = document.querySelector(".clear");
  const sizeEl = document.querySelector(".size");

  let size = 10;
  let isPressed = false;
  colorEl.value = "black";
  let color = colorEl.value;
  let x;
  let y;

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

  canvas.addEventListener("mousedown", (e) => {
          isPressed = true;
          x = e.offsetX;
          y = e.offsetY;
  });

  canvas.addEventListener("mouseup", (e) => {
         isPressed = false;
         x = undefined;
         y = undefined;
  });

 canvas.addEventListener("mousemove", (e) => {
        if (isPressed) {
           const x2 = e.offsetX;
           const y2 = e.offsetY;

           drawCircle(x2, y2);
           drawLine(x, y, x2, y2);
           x = x2;
           y = y2;
       }
 });

 function drawCircle(x, y) {
          ctx.beginPath();
          ctx.arc(x, y, size, 0, Math.PI * 2);
          ctx.fillStyle = color;
          ctx.fill();
  }

 function drawLine(x1, y1, x2, y2) {
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.strokeStyle = color;
          ctx.lineWidth = size * 2;
          ctx.stroke();
  }

 function updateSizeOnScreen() {
         sizeEl.innerText = size;
  }

 incrementBtn.addEventListener("click", () => {
         size += 5;
         if (size > 50) {
             size = 50;
          }
          updateSizeOnScreen();
 });

  decrementBtn.addEventListener("click", () => {
         size -= 5;
         if (size < 5) {
             size = 5;
          }
         updateSizeOnScreen();
   });

  colorEl.addEventListener("change", (e) => {
         color = e.target.value;
  });

  clearEl.addEventListener("click", () => {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
  });

Detailed explanation of JS code:

  • Firstly, create the variables on which we are making DOM changes.
  • On Canvas, we have functions mousemove, mousedown and mouseup
  • We have functions like, drawCircle, drawLine.
  • These functions are helpful in giving you an idea on drawing elements.
  • We have to register some events using addEventListener on Increment, decrement, size, color and clear buttons so that when they perform some events like click/change a certain action to be performed.

Finally, the Live demo of output will be:

Github Link:

GitHub logo sabiyatabassum / Day-22-Drawing-App

Day-22 Drawing App. Created with CodeSandbox

Day-22-Drawing-App

Created with CodeSandbox

Connect me at https://twitter.com/nerd_fswd

Hope you liked the project!!

Today's Pinch of Motivation:

    And I won't let you get me down
    I'll keep gettin' up when I hit the ground
    Oh, never give up, no, never give up no, no, oh
    I won't let you get me down
    I'll keep gettin' up when I hit the ground
    Oh, NEVER GIVE UP, no, never give up no, no, oh

Discussion (0)