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.
Â