Create a virtual canvas where users can draw and paint using HTML5 canvas and JavaScript.

Hey , I am Ajink in this post we will create a virtual canvas where you can draw and paint using html5 and javascript !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Canvas</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        #toolbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        canvas {
            border: 1px solid #000;
            margin-top: 60px; /* Adjusted to accommodate the fixed toolbox */
            cursor: crosshair;
            width: 100%; /* Make canvas responsive */
            max-width: 800px; /* Limit canvas width for larger screens */
        }

        #colorPicker,
        #brushSize,
        #imageInput,
        button {
            margin-right: 10px;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
        }

        #controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            margin-top: 10px;
        }

        input[type="range"] {
            width: 150px;
        }
    </style>
</head>
<body>
    <div id="toolbox">
        <div>
            <input type="color" id="colorPicker" value="#000000">
            <label for="brushSize">Brush Size:</label>
            <input type="range" id="brushSize" min="1" max="20" value="5">
        </div>
        <div>
            <button onclick="clearCanvas()">Clear</button>
            <input type="file" id="imageInput" accept="image/*">
        </div>
    </div>
    <canvas id="myCanvas" width="800" height="600"></canvas>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var painting = false;

            var colorPicker = document.getElementById('colorPicker');
            var brushSizeInput = document.getElementById('brushSize');
            var imageInput = document.getElementById('imageInput');

            canvas.addEventListener('mousedown', startPainting);
            canvas.addEventListener('mouseup', stopPainting);
            canvas.addEventListener('mousemove', paint);
            colorPicker.addEventListener('input', setColor);
            brushSizeInput.addEventListener('input', setBrushSize);
            imageInput.addEventListener('change', pasteImage);

            canvas.addEventListener('touchstart', function (e) {
                startPainting(e.touches[0]);
            });
            canvas.addEventListener('touchend', stopPainting);
            canvas.addEventListener('touchmove', function (e) {
                paint(e.touches[0]);
                e.preventDefault();
            });

            context.lineWidth = 5;
            context.lineCap = 'round';
            context.strokeStyle = '#000';

            function startPainting(e) {
                painting = true;
                paint(e);
            }

            function stopPainting() {
                painting = false;
                context.beginPath();
            }

            function paint(e) {
                if (!painting) return;

                context.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
                context.stroke();
                context.beginPath();
                context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
            }

            function setColor() {
                context.strokeStyle = colorPicker.value;
            }

            function setBrushSize() {
                context.lineWidth = brushSizeInput.value;
            }

            function pasteImage(e) {
                var file = e.target.files[0];

                if (file) {
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        var img = new Image();
                        img.onload = function () {
                            context.drawImage(img, 0, 0, canvas.width, canvas.height);
                        };
                        img.src = event.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            }

            function clearCanvas() {
                context.clearRect(0, 0, canvas.width, canvas.height);
            }
        });
    </script>
</body>
</html>
Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 59