Drawing App javascript | Drawing App using html css javascript - codewithrandom

Drawing App javascript | Drawing App using Html css javascript

Drawing App javascript | Drawing App using html css javascript - codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Drawing App. We use HTML, Css, and javascript for this Drawing App. Hope you enjoy our blog so let's start with a basic HTML structure for a Drawing App.

HTML code 

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="style.css" />  
   <title>Drawing App</title>  
  </head>  
  <body>  
   <canvas id="canvas" width="800" height="700"></canvas>  
   <div class="toolbox">  
    <button id="decrease">-</button>  
    <span id="size">10</span>  
    <button id="increase">+</button>  
    <input type="color" id="color">  
    <button id="clear">X</button>  
   </div>  
   <script src="script.js"></script>  
  </body>  
 </html>  
There is all HTML code for the Drawing App. Now, you can see output without CSS, then we write javascript for the Drawing App.
output
Drawing App javascript | Drawing App using html css javascript - codewithrandom

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: 2px solid steelblue;  
 }  
 .toolbox {  
  background-color: steelblue;  
  border: 1px solid slateblue;  
  display: flex;  
  width: 804px;  
  padding: 1rem;  
 }  
 .toolbox > * {  
  background-color: #fff;  
  border: none;  
  display: inline-flex;  
  align-items: center;  
  justify-content: center;  
  font-size: 2rem;  
  height: 50px;  
  width: 50px;  
  margin: 0.25rem;  
  padding: 0.25rem;  
  cursor: pointer;  
 }  
 .toolbox > *:last-child {  
  margin-left: auto;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
Drawing App javascript | Drawing App using html css javascript - codewithrandom

Now add javascript for functionality.

Javascript code 

 const canvas = document.getElementById('canvas');  
 const increaseBtn = document.getElementById('increase');  
 const decreaseBtn = document.getElementById('decrease');  
 const sizeEL = document.getElementById('size');  
 const colorEl = document.getElementById('color');  
 const clearEl = document.getElementById('clear');  
 const ctx = canvas.getContext('2d');  
 let size = 10  
 let isPressed = false  
 colorEl.value = 'black'  
 let color = colorEl.value  
 let x  
 let y  
 canvas.addEventListener('mousedown', (e) => {  
   isPressed = true  
   x = e.offsetX  
   y = e.offsetY  
 })  
 document.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  
 }  
 increaseBtn.addEventListener('click', () => {  
   size += 5  
   if(size > 50) {  
     size = 50  
   }  
   updateSizeOnScreen()  
 })  
 decreaseBtn.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))  
Final output

Drawing App javascript | Drawing App using html css javascript - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Drawing App. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create an Drawing App using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post