Drawing App using HTML CSS and JavaScript

To run this code you just need to copy the HTML CSS and JavaScript code and run it into your code Editor. 

Preview

drawing app using html css and javascript, simple paint app using html and javascript to draw rectangle, geeks help, Drawing app using html css and javascript free, Drawing app using html css and javascript download

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>


complete html notes pdf, complete html notes for beginners, geeks help html css projects

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);
});

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad