How to Build a Drawing App with HTML
CSS and JavaScript
Drawing applications have numerous brushes that help style your drawings easily. This software can be used to make realistic sketches with ease. Applications help you to edit the shape the way you like. Customize apps the way you like.
Video Tutorial of Build A Drawing App
Build A Drawing App [Source Codes]
To Build a Drawing App with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Drawing App</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <section class="tools-board">
- <div class="row">
- <label class="title">Shapes</label>
- <ul class="options">
- <li class="option tool" id="rectangle">
- <img src="icons/rectangle.svg" alt="">
- <span>Rectangle</span>
- </li>
- <li class="option tool" id="circle">
- <img src="icons/circle.svg" alt="">
- <span>Circle</span>
- </li>
- <li class="option tool" id="triangle">
- <img src="icons/triangle.svg" alt="">
- <span>Triangle</span>
- </li>
- <li class="option">
- <input type="checkbox" id="fill-color">
- <label for="fill-color">Fill color</label>
- </li>
- </ul>
- </div>
- <div class="row">
- <label class="title">Options</label>
- <ul class="options">
- <li class="option active tool" id="brush">
- <img src="icons/brush.svg" alt="">
- <span>Brush</span>
- </li>
- <li class="option tool" id="eraser">
- <img src="icons/eraser.svg" alt="">
- <span>Eraser</span>
- </li>
- <li class="option">
- <input type="range" id="size-slider" min="1" max="30" value="5">
- </li>
- </ul>
- </div>
- <div class="row colors">
- <label class="title">Colors</label>
- <ul class="options">
- <li class="option"></li>
- <li class="option selected"></li>
- <li class="option"></li>
- <li class="option"></li>
- <li class="option">
- <input type="color" id="color-picker" value="#4A98F7">
- </li>
- </ul>
- </div>
- <div class="row buttons">
- <button class="clear-canvas">Clear All</button>
- <button class="save-img">Save</button>
- </div>
- </section>
- <section class="drawing-board">
- <canvas></canvas>
- </section>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Open Sans", sans-serif;
- }
- body{
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background: #282A35;
- }
- .container {
- display: flex;
- width: 100%;
- height: 100vh;
- gap: 12px;
- padding: 10px;
- max-width: 1300px;
- }
-
- section{
- background: #f1f1f1;
- border-radius: 8px;
- }
- .tools-board{
- width: 250px;
- padding: 15px 22px 0;
- }
- .tools-board .row{
- margin-bottom: 20px;
- }
- .row .options{
- list-style: none;
- margin: 12px 0 0 5px;
- }
- .row .options .option{
- display: flex;
- cursor: pointer;
- align-items: center;
- margin-bottom: 10px;
- }
- .option:is(:hover, .active) img{
- filter: invert(17%) sepia(90%) saturate(3000%) hue-rotate(900deg) brightness(100%) contrast(100%);
- }
- .option :where(span, label){
- color: #797979;
- cursor: pointer;
- padding-left: 10px;
- }
- .option:is(:hover, .active) :where(span, label){
- color: #4A98F7;
- }
- .option #fill-color{
- cursor: pointer;
- height: 14px;
- width: 14px;
- }
- #fill-color:checked ~ label{
- color: #4A98F7;
- }
- .option #size-slider{
- width: 100%;
- height: 5px;
- margin-top: 10px;
- }
- .colors .options{
- display: flex;
- justify-content: space-between;
- }
-
- .colors .option{
- height: 20px;
- width: 20px;
- border-radius: 50%;
- margin-top: 3px;
- position: relative;
- }
- .colors .option:nth-child(1){
- background-color: #fff;
- border: 1px solid #bfbfbf;
- }
- .colors .option:nth-child(2){
- background-color: #000;
- }
- .colors .option:nth-child(3){
- background-color: #E02020;
- }
- .colors .option:nth-child(4){
- background-color: #6DD400;
- }
- .colors .option:nth-child(5){
- background-color: #4A98F7;
- }
- .colors .option.selected::before{
- position: absolute;
- content: "";
- top: 50%;
- left: 50%;
- height: 12px;
- width: 12px;
- background: inherit;
- border-radius: inherit;
- border: 2px solid #fff;
- transform: translate(-50%, -50%);
- }
- .colors .option:first-child.selected::before{
- border-color: #ccc;
- }
- .option #color-picker{
- opacity: 0;
- cursor: pointer;
- }
- .buttons button{
- width: 100%;
- color: #fff;
- border: none;
- outline: none;
- padding: 11px 0;
- font-size: 0.9rem;
- margin-bottom: 13px;
- background: none;
- border-radius: 4px;
- cursor: pointer;
- }
- .buttons .clear-canvas{
- color: #6C757D;
- border: 1px solid #6C757D;
- transition: all 0.3s ease;
- }
- .clear-canvas:hover{
- color: #fff;
- background: #785BF8;
- }
- .buttons .save-img{
- background: #785BF8;
- border: 1px solid #4A98F7;
- }
- .drawing-board{
- flex: 1;
- overflow: hidden;
- }
- .drawing-board canvas{
- width: 100%;
- height: 100%;
- }
Now paste the following codes into your script.js file
- const canvas = document.querySelector("canvas"),
- toolBtns = document.querySelectorAll(".tool"),
- fillColor = document.querySelector("#fill-color"),
- sizeSlider = document.querySelector("#size-slider"),
- colorBtns = document.querySelectorAll(".colors .option"),
- colorPicker = document.querySelector("#color-picker"),
- clearCanvas = document.querySelector(".clear-canvas"),
- saveImg = document.querySelector(".save-img"),
- ctx = canvas.getContext("2d");
-
- let prevMouseX, prevMouseY, snapshot,
- isDrawing = false,
- selectedTool = "brush",
- brushWidth = 5,
- selectedColor = "#000";
-
- const setCanvasBackground = () => {
-
- ctx.fillStyle = "#fff";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- ctx.fillStyle = selectedColor;
- }
-
- window.addEventListener("load", () => {
-
- canvas.width = canvas.offsetWidth;
- canvas.height = canvas.offsetHeight;
- setCanvasBackground();
- });
-
- const drawRect = (e) => {
-
- if(!fillColor.checked) {
-
- return ctx.strokeRect(e.offsetX, e.offsetY, prevMouseX - e.offsetX, prevMouseY - e.offsetY);
- }
- ctx.fillRect(e.offsetX, e.offsetY, prevMouseX - e.offsetX, prevMouseY - e.offsetY);
- }
-
- const drawCircle = (e) => {
- ctx.beginPath();
-
- let radius = Math.sqrt(Math.pow((prevMouseX - e.offsetX), 2) + Math.pow((prevMouseY - e.offsetY), 2));
- ctx.arc(prevMouseX, prevMouseY, radius, 0, 2 * Math.PI);
- fillColor.checked ? ctx.fill() : ctx.stroke();
- }
-
- const drawTriangle = (e) => {
- ctx.beginPath();
-
- ctx.moveTo(prevMouseX, prevMouseY);
- ctx.lineTo(e.offsetX, e.offsetY);
- ctx.lineTo(prevMouseX * 2 - e.offsetX, e.offsetY);
- ctx.closePath();
- fillColor.checked ? ctx.fill() : ctx.stroke();
- }
-
- const startDraw = (e) => {
- isDrawing = true;
- prevMouseX = e.offsetX;
- prevMouseY = e.offsetY;
- ctx.beginPath();
- ctx.lineWidth = brushWidth;
- ctx.strokeStyle = selectedColor;
- ctx.fillStyle = selectedColor;
- snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);
- }
-
- const drawing = (e) => {
- if(!isDrawing) return;
- ctx.putImageData(snapshot, 0, 0);
-
- if(selectedTool === "brush" || selectedTool === "eraser") {
-
- ctx.strokeStyle = selectedTool === "eraser" ? "#fff" : selectedColor;
- ctx.lineTo(e.offsetX, e.offsetY);
- ctx.stroke();
- } else if(selectedTool === "rectangle"){
- drawRect(e);
- } else if(selectedTool === "circle"){
- drawCircle(e);
- } else {
- drawTriangle(e);
- }
- }
-
- toolBtns.forEach(btn => {
- btn.addEventListener("click", () => {
- document.querySelector(".options .active").classList.remove("active");
- btn.classList.add("active");
- selectedTool = btn.id;
- });
- });
-
- sizeSlider.addEventListener("change", () => brushWidth = sizeSlider.value);
-
- colorBtns.forEach(btn => {
- btn.addEventListener("click", () => {
- document.querySelector(".options .selected").classList.remove("selected");
- btn.classList.add("selected");
-
- selectedColor = window.getComputedStyle(btn).getPropertyValue("background-color");
- });
- });
-
- colorPicker.addEventListener("change", () => {
-
- colorPicker.parentElement.style.background = colorPicker.value;
- colorPicker.parentElement.click();
- });
-
- clearCanvas.addEventListener("click", () => {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- setCanvasBackground();
- });
-
- saveImg.addEventListener("click", () => {
- const link = document.createElement("a");
- link.download = `${Date.now()}.jpg`;
- link.href = canvas.toDataURL();
- link.click();
- });
-
- canvas.addEventListener("mousedown", startDraw);
- canvas.addEventListener("mousemove", drawing);
- canvas.addEventListener("mouseup", () => isDrawing = false);
If you face any difficulties while creating Drawing App or your code is not working as expected, you can download the source code files by clicking download button.