Paint App using Bootstrap & JavaScript

Last Updated : 28 Feb, 2024

We will be building a simple paint application that lets you draw just like in MS-Paint. Through this article, we will learn how to implement and work with Canvas in JavaScript. Our app contains two sections, one for drawing and the other is a menu where the user can customize the brush color, width, and opacity. The user will be provided with a brush and draw on the canvas using that brush.

Prerequisites

Approach

The Paint App allows users to draw on a canvas using various brush settings. When the user interacts with the canvas, the app tracks mouse events to start, continue, and end drawing strokes. It captures the brush color, width, and opacity from input elements. Upon drawing, it updates the canvas context with the selected brush settings, such as color, width, and opacity. This process ensures that users can create drawings with customizable brush properties, providing a versatile and interactive painting experience on the web.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Paint App</title>
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles -->
    <style>
        .App {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
        }
 
        h1 {
            font-family: 'Lobster', cursive;
            font-size: 50px;
            color: #4644f0;
        }
 
        .draw-area {
            width: 100%;
            max-width: 100vw;
            /* Ensure the width doesn't
             exceed the viewport width */
            height: auto;
            border: 2px solid #808080;
            position: relative;
            background-color: white;
            overflow-x: hidden;
            /* Hide horizontal scrollbar */
        }
 
        .Menu {
            width: 100%;
            max-width: 100vw;
            /* Ensure the width doesn't
             exceed the viewport width */
            height: 50px;
            display: flex;
            justify-content: space-evenly;
            border-radius: 5px;
            align-items: center;
            background-color: #a3a3a32d;
            margin: auto;
            margin-top: 10px;
            overflow-x: hidden;
            /* Hide horizontal scrollbar */
        }
 
        /* Adjusted styles for responsiveness */
        .Menu label {
            font-size: 14px;
        }
 
        .Menu input[type="color"],
        .Menu input[type="range"] {
            width: 20%;
            max-width: 100px;
        }
    </style>
</head>
 
<body>
    <div class="App">
        <h1>Paint App</h1>
        <div class="draw-area">
            <div class="Menu">
                <label>Brush Color </label>
                <input type="color" id="brushColor">
                <label>Brush Width </label>
                <input type="range" id="brushWidth" min="3" max="20">
                <label>Brush Opacity</label>
                <input type="range" id="brushOpacity" min="1" max="100">
            </div>
            <canvas id="canvas" width="1280" height="720"></canvas>
        </div>
    </div>
 
    <!-- Bootstrap JS -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <!-- Custom JavaScript -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const brushColor = document.getElementById('brushColor');
            const brushWidth = document.getElementById('brushWidth');
            const brushOpacity = document.getElementById('brushOpacity');
 
            let isDrawing = false;
 
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mouseup', endDrawing);
            canvas.addEventListener('mousemove', draw);
 
            function startDrawing(e) {
                ctx.beginPath();
                ctx.moveTo(e.offsetX, e.offsetY);
                isDrawing = true;
            }
 
            function endDrawing() {
                ctx.closePath();
                isDrawing = false;
            }
 
            function draw(e) {
                if (!isDrawing) return;
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.strokeStyle = brushColor.value;
                ctx.lineWidth = brushWidth.value;
                ctx.globalAlpha = brushOpacity.value / 100;
                ctx.stroke();
            }
        });
    </script>
</body>
 
</html>