To run this code you just need to copy the HTML CSS and JavaScript code and run it into your code Editor.
Preview
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Drawing App </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Geeks Help Drawing Pad</h1>
<canvas width="600" height="600"></canvas>
<div class="mainContainer">
<button id="descrease" title="Decrease Line Width">-</button>
<span id="size" title="Line Width Size">10</span>
<button id="increase" title="Increase Line Width">+</button>
<input type="color" id="colorSelector" title="Choose Line Color" />
<p id="clearIcon" class="fas fa-broom" title="Clear Drawing Pad">Clear</>
</div>
</body>
<script src="app.js"></script>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;1,500&display=swap');
* {
box-sizing: border-box;
user-select: none;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
}
canvas {
background-color: #fff;
border: 1px solid #d66a11;
border-radius: 10px;
box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.6);
cursor: crosshair;
}
.mainContainer {
background-color: #e65b00;
display: flex;
width: 600px;
padding: 1rem;
border-radius: 10px;
box-shadow: 2px 2.5px 2px 2px rgba(150, 141, 141, 0.6);
margin-bottom: 5%;
}
.mainContainer * {
background-color: white;
border: none;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 2rem;
height: 40px;
width: 600px;
margin: 0.25rem;
padding: 0.5rem;
cursor: pointer;
border-radius: 10px;
}
.mainContainer button:active,
#clearIcon:active,
#colorSelector:active {
transform: scale(0.98);
box-shadow: inset 0 0 7px #03192b;
}
#descrease {
background-color: red;
color: #fff;
border: 1px solid white;
}
#increase {
background-color: green;
color: #fff;
border: 1px solid white;
}
#size {
font-weight: bold;
}
.mainContainer :last-child {
margin-left: auto;
padding: 1rem;
background-color: #fff;
font-size: 16px;
color: red;
font-family: "Poppins";
font-weight: bold;
}
@media screen and (max-width: 635px) {
.mainContainer,
canvas {
width: 60%;
flex-direction: column;
}
.mainContainer {
flex-wrap: wrap;
align-items: center;
}
.mainContainer :last-child {
margin: auto;
}
#descrease, size, #increase, #colorSelector, #clearIcon {
width: 70%;
}
}
JavaScript
script.js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("descrease");
const sizeEl = document.getElementById("size");
const clearButton = document.getElementById("clearIcon");
const colorSelector = document.getElementById("colorSelector");
let size = 10;
let isPressed = false;
let color = "#000";
let x;
let y;
canvas.addEventListener("mousedown", (e) => {
isPressed = true;
x = e.offsetX;
y = e.offsetY;
});
canvas.addEventListener("mouseup", () => {
isPressed = false;
x = undefined;
y = undefined;
});
canvas.addEventListener("mouseleave", () => {
isPressed = false;
});
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.textContent = size;
}
increaseButton.addEventListener("click", () => {
size += 5;
if (size > 50) {
size = 50;
}
updateSizeOnScreen();
});
decreaseButton.addEventListener("click", () => {
size -= 5;
if (size - 5 < 5) {
size = 5;
}
updateSizeOnScreen();
});
colorSelector.addEventListener("change", (e) => {
color = e.target.value;
});
clearButton.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
