Day-22 Drawing App
Tags: javascript, 50projects50days, day22
Published: 2021-06-18 13:09:36

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q68teq3c52yntk3t2vm6.gif)


Glimpse of the __output__ of our project:
{% codesandbox Day-22-Drawing-App-uyfre %}

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>

__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 <div> 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:

{% codesandbox Day-22-Drawing-App-uyfre %}


####Github Link: {% github sabiyatabassum/Day-22-Drawing-App %}

####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