Hey everyone. Welcome to yet another exciting tutorial from Coding Artist. In today’s tutorial, we will learn how to create a drawing app. To build this drawing app, we need HTML, CSS and vanilla Javascript.
This isn’t an absolute beginner-friendly javascript project. I would suggest this project to javascript intermediates.
If you are looking for other javascript projects to improve your JS skills, I will suggest you check out this playlist. This playlist from my youtube channel consists of 70+ Javascript projects. The difficulty of these projects ranges from simple to quite advanced.
Now, coming to the drawing app. The drawing app consists of two main sections. The first is a blank canvas, and the second is the options menu. The user can use moue/touch to draw on the canvas. Through the options menu, the user can change the size of the pen.
The user can also change the pen colour and the background colour of the canvas. Next, is the erase button through which the user can use a mouse/touch to erase parts of the drawing. Finally, we have a clear button that cleans up the whole canvas to give a new fresh canvas to start with.
Video Tutorial:
If you would prefer to learn by watching a video tutorial rather than reading this blog post, you can check out this video here down below. I post regular tutorials, tricks and tips on my youtube channel. So be sure to subscribe to my youtube channel to get access to these daily resources.
Project Folder Structure:
Before we begin the actual coding we need to create the project folder structure. We create a folder called – ‘Drawing App’. Within this folder, we have three files. These files are index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file.
HTML:
We begin with the HTML section. This creates the layout required for our drawing app. Firstly copy the code provided to you below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drawing App</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="paintArea">
<canvas id="canvas"></canvas>
</div>
<div class="options">
<div class="tools" id="tools-section">
<div class="tools-row">
<div class="tools-wrapper">
<h5><span id="tool-type"></span> Size:</h5>
<input type="range" id="pen-slider" value="4" />
</div>
<div class="tools-wrapper">
<h5>Color:</h5>
<input type="color" id="color-input" />
</div>
<div class="tools-wrapper">
<h5>Background Color:</h5>
<input type="color" id="color-background" />
</div>
</div>
<div class="tools-row">
<button id="button-clear">Clear</button>
<button id="button-pen">Pen</button>
<button id="button-erase">Erase</button>
</div>
</div>
</div>
<!-- Script-->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style the app to give it a more modern and sleek look by using CSS. For this copy the code below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
#paintArea {
position: relative;
border: 8px solid #788eff;
height: 70vh;
width: 100%;
}
.options {
height: 30vh;
background-color: #788eff;
padding: 30px;
}
.tools-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-bottom: 40px;
}
.tools-row h5 {
margin-bottom: 10px;
color: #ffffff;
font-weight: 400;
font-size: 18px;
letter-spacing: 0.5px;
}
.tools-row button {
padding: 12px 0;
border-radius: 25px;
border: none;
background-color: #ffffff;
font-size: 18px;
color: #788eff;
}
input[type="range"] {
height: 40px;
}
input[type="color"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
width: 70px;
height: 40px;
border: none;
cursor: pointer;
}
input[type="color"]::-webkit-color-swatch {
border-radius: 8px;
border: 3px solid #000000;
}
input[type="color"]::moz-color-swatch {
border-radius: 8px;
border: 3px solid #000000;
}
Javascript:
Lastly, we add functionality to this app using Javascript. Once again copy the code provided below and paste it into your script file.
//Initial references
let colorsRef = document.getElementsByClassName("colors");
let canvas = document.getElementById("canvas");
let backgroundButton = document.getElementById("color-background");
let colorButton = document.getElementById("color-input");
let clearButton = document.getElementById("button-clear");
let eraseButton = document.getElementById("button-erase");
let penButton = document.getElementById("button-pen");
let penSize = document.getElementById("pen-slider");
let toolType = document.getElementById("tool-type");
//eraser = false and drawing=false initially as user hasn't started using both
let erase_bool = false;
let draw_bool = false;
//context for canvas
let context = canvas.getContext("2d");
//Initially mouse X and Y positions are 0
let mouseX = 0;
let mouseY = 0;
//get left and top of canvas
let rectLeft = canvas.getBoundingClientRect().left;
let rectTop = canvas.getBoundingClientRect().top;
//Inital Features
const init = () => {
context.strokeStyle = "black";
context.lineWidth = 1;
//Set canvas height to parent div height
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
//Set range title to pen size
toolType.innerHTML = "Pen";
//Set background and color inputs initially
canvas.style.backgroundColor = "#ffffff";
backgroundButton.value = "#ffffff";
penButton.value = context.strokeStyle;
};
//Detect touch device
const is_touch_device = () => {
try {
//We try to create TouchEvent (it would fail for desktops and throw error)
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
};
//Exact x and y position of mouse/touch
const getXY = (e) => {
mouseX = (!is_touch_device() ? e.pageX : e.touches?.[0].pageX) - rectLeft;
mouseY = (!is_touch_device() ? e.pageY : e.touches?.[0].pageY) - rectTop;
};
const stopDrawing = () => {
context.beginPath();
draw_bool = false;
};
//User has started drawing
const startDrawing = (e) => {
//drawing = true
draw_bool = true;
getXY(e);
//Start Drawing
context.beginPath();
context.moveTo(mouseX, mouseY);
};
//draw function
const drawOnCanvas = (e) => {
if (!is_touch_device()) {
e.preventDefault();
}
getXY(e);
//if user is drawing
if (draw_bool) {
//create a line to x and y position of cursor
context.lineTo(mouseX, mouseY);
context.stroke();
if (erase_bool) {
//destination-out draws new shapes behind the existing canvas content
context.globalCompositeOperation = "destination-out";
} else {
context.globalCompositeOperation = "source-over";
}
}
};
//Mouse down/touch start inside canvas
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("touchstart", startDrawing);
//Start drawing when mouse.touch moves
canvas.addEventListener("mousemove", drawOnCanvas);
canvas.addEventListener("touchmove", drawOnCanvas);
//when mouse click stops/touch stops stop drawing and begin a new path
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("touchend", stopDrawing);
//When mouse leaves the canvas
canvas.addEventListener("mouseleave", stopDrawing);
//Button for pen mode
penButton.addEventListener("click", () => {
//set range title to pen size
toolType.innerHTML = "Pen";
erase_bool = false;
});
//Button for eraser mode
eraseButton.addEventListener("click", () => {
erase_bool = true;
//set range title to erase size
toolType.innerHTML = "Eraser";
});
//Adjust Pen size
penSize.addEventListener("input", () => {
//set width to range value
context.lineWidth = penSize.value;
});
//Change color
colorButton.addEventListener("change", () => {
//set stroke color
context.strokeStyle = colorButton.value;
});
//Change Background
backgroundButton.addEventListener("change", () => {
canvas.style.backgroundColor = backgroundButton.value;
});
//Clear
clearButton.addEventListener("click", () => {
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.style.backgroundColor = "#fff";
backgroundButton.value = "#fff";
});
window.onload = init();
Your drawing app is now ready. If you have any issues while creating this project, you can download the source code by clicking on the download source code button below. Also if you have any queries, suggestions, or feedback do comment below.
Â
