Drawing Web App in HTML, CSS & JavaScript | Project Series Day - 28 | Frontend everything

Hello Everyone 👋Welcome to My New Blog. Today I have made a Drawing Web App with the help of HTML, CSS, and JavaScript | It is Project Series Day 28. 😍

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making this simple animate or scroll step by step.

Video of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

In HTML we have made a div for canvas. Also for the buttons, we will put for color, radius, and more.

<main>
  <div id="canvas"></div>
  <div id="tools">
    <div class="tool tool-selected"><i class="fas fa-paint-brush"></i></div>
    <div class="tool"><i class="fas fa-square-full"></i></div>
    <div class="tool"><i class="fas fa-circle"></i></div>
    <div class="tool"><i class="fas fa-eraser"></i></div>
    
    <div class="option" id="size-selector"><i class="fas fa-sliders-h"></i></div>
    <div class="option" id="color-selector"></div>
    <div class="option" id="download"><i class="fas fa-cloud-download-alt"></i></div>
    
  </div>
</main>

<div id="color-picker" class="pane">
  
  <div class="picker-titlebar">
    <h2>Choose a color</h2>
    <i class="fas fa-times close-picker" id="close-color-picker"></i>  
  </div>
  
  <div id="sliders-wrapper">
  <span>R</span>
  <input type="range" class="color-range" value="50" min="0" max="255">
  <span>G</span>
  <input type="range" class="color-range" value="50" min="0" max="255">
  <span>B</span>
  <input type="range" class="color-range" value="60" min="0" max="255">
  </div>
  
</div>

<div id="size-picker" class="pane">
  
  <div class="picker-titlebar">
    <h2>Settings</h2>
    <i class="fas fa-times close-picker" id="close-size-picker"></i>  
  </div>
  
  <div id="sliders-wrapper">
    <span>Radius</span>
    <input type="range" value="20" min="0" max="255" id="radius-range">
  </div>
  
</div>

After the HTML we will design the buttons and make it look like a drawing app.

CSS🎈( step - 2)

*:focus {
  outline: none;
}

html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

h2 {
  font-family: 'Pacifico';
}

main {
  width: 100vw;
  height: 100vh;
}

#canvas {
  
}

#tools {
  width: 100%;
  height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #DDD;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.tool, .option {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.tool, .option > i {
  font-size: 1.5em;
}

.tool-selected {
  background-color: #555;
  color: white;
}

.pane {
  position: absolute;
  top: 100%;
  height: 50vh;
  width: 100%;
  max-width: 500px;
  left: 0%;
  background-color: #EEE;
  transition: top .3s ease;
}

.open {
  top: 50% !important;
}

.picker-titlebar {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.picker-titlebar > h2 {
  margin-left: auto;
}

.close-picker {
  font-size: 2em;
  cursor: pointer;
  display: inline-block;
  margin-left: auto;
  margin-right: 10px;
}

#sliders-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-row-gap: 20px; 
}

#sliders-wrapper > input {
  box-sizing: border-box;
  margin-right: 20px;
}
#sliders-wrapper > span {
  font-weight: 900;
  font-family: 'Pacifico';
  text-align: center;
}

Now we have done the CSS coding as well, now let's move to javascript. in javascript, we have not done enough coding. we have written for making buttons work.

JavaScript🎈( step - 3)

/*** GUI Part ***/
var tool = 0 
var tools = document.querySelectorAll(".tool")
var drawColor = null
var radius = 20
setColor([50, 50, 60])

for (var i = 0; i < tools.length; i++) {
  tools[i].onclick = function (id) {
    return function () {
      setTool(id)
    }
  }(i)
}

function setTool(id) {
  tool = id
  for (var i = 0; i < tools.length; i++) {
    tools[i].classList.remove("tool-selected")
    if (id == i)
      tools[i].classList.add("tool-selected")
  }
}

function setColor(c) {
  drawColor = c
  document.querySelector('#color-selector').style.backgroundColor = 
    'rgb(' +
    drawColor[0] + ',' +
    drawColor[1] + ',' +
    drawColor[2] +
    ')'
  document.querySelector('#color-picker').style.backgroundColor = 
    'rgb(' +
    drawColor[0] + ',' +
    drawColor[1] + ',' +
    drawColor[2] +
    ')'
  if ((drawColor[0] + drawColor[1] + drawColor[2]) / 3 < 122) {
    document.querySelector('#color-picker').style.color = 'white'
  } else {
    document.querySelector('#color-picker').style.color = 'black'
  }
}

document.onwheel = function (e) {
  if (e.deltaY < 0)
    radius+=2
  if (e.deltaY > 0)
    radius-=2
}

document.querySelector("#download").onclick = function () {
  graphic.save("Drawing.png")
}
document.querySelector("#color-selector").onclick = function () {
  document.querySelector("#color-picker").classList.add("open")
}
document.querySelector("#close-color-picker").onclick = function () {
  document.querySelector("#color-picker").classList.remove("open")
}
document.querySelector("#size-selector").onclick = function () {
  document.querySelector("#size-picker").classList.add("open")
}
document.querySelector("#close-size-picker").onclick = function () {
  document.querySelector("#size-picker").classList.remove("open")
}
for (var range of document.querySelectorAll(".color-range")) {
  range.oninput = refreshColorPicker
}
document.querySelector("#radius-range").oninput = refreshRadius
function refreshColorPicker() {
  n = [0, 0, 0]
  for (var i = 0; i < document.querySelectorAll(".color-range").length; i++) {
    n[i] = parseInt(document.querySelectorAll(".color-range")[i].value)
  }
  setColor(n)
}
function refreshRadius() {
  radius = parseInt(document.querySelector("#radius-range").value)
}
/*** Drawing part ***/
var lastPoint = null
var graphic = null

var squareOrigin = null
var circleOrigin = null

function setup() {
  createCanvas(document.body.clientWidth, document.body.clientHeight - 50).parent("#canvas")
  ellipseMode(CENTER)
  graphic = createGraphics(document.body.clientWidth, document.body.clientHeight - 50)
  graphic.background(255)
}

function draw() {
  background(255)
  image(graphic, 0, 0)
  
  if (tool == 0 || tool == 3)
    tool0Preview()
  
  if (mouseIsPressed) {
    if (!document.querySelector("#color-picker").classList.contains("open") && !document.querySelector("#size-picker").classList.contains("open"))
      drawOnGraphic()
  } else {
    lastPoint = null
    onMouseQuit()
  }
 
}

function tool0Preview()
{
  noFill()
  stroke(200)
  strokeWeight(2)
  ellipse(mouseX, mouseY, radius, radius)
}

function drawOnGraphic() {
  if (lastPoint == null)
    lastPoint = [mouseX, mouseY]
  
  if (tool == 0) {
    graphic.noFill()
    graphic.stroke(drawColor)
    graphic.strokeWeight(radius)
    graphic.line(mouseX, mouseY, lastPoint[0], lastPoint[1])
  }
  
  if (tool == 1) {
    if (squareOrigin == null) {
      squareOrigin = [mouseX, mouseY]
    } else {
      fill([drawColor[0], drawColor[1], drawColor[2], 122])
      noStroke()
      rect(squareOrigin[0], squareOrigin[1], mouseX - squareOrigin[0], mouseY - squareOrigin[1])
    }
  }
  
  if (tool == 2) {
    if (circleOrigin == null) {
      circleOrigin = [mouseX, mouseY]
    } else {
      fill([drawColor[0], drawColor[1], drawColor[2], 122])
      noStroke()
      let d = createVector(mouseX - circleOrigin[0], mouseY - circleOrigin[1]).mag()
      ellipseMode(CENTER)
      ellipse(circleOrigin[0], circleOrigin[1], d * 2, d * 2)
    }
  }
   
  if (tool == 3) {
    graphic.noFill()
    graphic.stroke(255)
    graphic.strokeWeight(radius)
    graphic.line(mouseX, mouseY, lastPoint[0], lastPoint[1])
  }
  
  lastPoint = [mouseX, mouseY]
}

function onMouseQuit() {
  if (squareOrigin != null) {
      graphic.fill(drawColor)
      graphic.noStroke()
      graphic.rect(squareOrigin[0], squareOrigin[1], mouseX - squareOrigin[0], mouseY - squareOrigin[1])
      squareOrigin = null
  }
  if (circleOrigin != null) {
    graphic.fill(drawColor)
    graphic.noStroke()
    let d = createVector(mouseX - circleOrigin[0], mouseY - circleOrigin[1]).mag()
    graphic.ellipseMode(CENTER)
    graphic.ellipse(circleOrigin[0], circleOrigin[1], d * 2, d * 2)
    circleOrigin = null
  }
}

All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.

More blogs you should give a check!

Pexels Website Clone With HTML< CSS and Javascript
Word Counter In Angular JS
Responsive Newsletter in CSS
Dark And Night mode toggle button in javascript
Best Youtube Channels For Learning Coding
Top-notch Project ideas For HTML< CSS< Javascript
Best Platform To sell your Website Templates
Google Homepage Clone With Html and CSS

Drawing Web App In JavaScript - frontend everything