Interactive Drawing Tool Using the Canvas API

Explore the power of the Canvas API with this interactive drawing tool. This example demonstrates real-time rendering, user input handling, and customization options, offering a hands-on introduction to 2D graphics programming in JavaScript. Perfect for beginners and developers aiming to enhance their skills with the Canvas API.

canvas api

Canvas API interactive drawing JavaScript graphics real-time rendering 2D graphics web development HTML canvas coding tutorial user interaction frontend tools

video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Drawing Tool - Step 1</title>
    <style>
        /* Center the canvas on the page */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f3f3f3; /* Light gray background for contrast */
        }

        /* Style the canvas element */
        canvas {
            border: 1px solid #000; /* Add a black border around the canvas */
            background-color: #fff; /* Set canvas background to white */
            cursor: crosshair; /* Use a crosshair cursor for better drawing precision */
        }
    </style>
</head>
<body>
    <!-- The canvas element where the drawing will happen -->
    <canvas id="drawingCanvas" width="800" height="600"></canvas>

    <script>
        // Select the canvas element by its ID
        const canvas = document.getElementById("drawingCanvas");

        // Get the 2D rendering context for drawing
        const ctx = canvas.getContext("2d");

        // Variable to track whether the user is currently drawing
        let isDrawing = false;

        // Variables to store the last mouse coordinates
        let lastX = 0;
        let lastY = 0;

        // Event listener for when the user presses the mouse button down
        canvas.addEventListener("mousedown", (e) => {
            isDrawing = true; // Start drawing
            [lastX, lastY] = [e.offsetX, e.offsetY]; // Save the starting point
        });

        // Event listener for when the mouse moves over the canvas
        canvas.addEventListener("mousemove", (e) => {
            if (!isDrawing) return; // Exit if the mouse button is not pressed

            // Begin a new path
            ctx.beginPath();

            // Move to the last saved position
            ctx.moveTo(lastX, lastY);

            // Draw a line to the current mouse position
            ctx.lineTo(e.offsetX, e.offsetY);

            // Set the line color and width
            ctx.strokeStyle = "black"; // Set line color to black
            ctx.lineWidth = 2; // Set line width to 2 pixels

            // Apply the stroke to the canvas
            ctx.stroke();

            // Update the last mouse position
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });

        // Event listener for when the mouse button is released
        canvas.addEventListener("mouseup", () => isDrawing = false);

        // Event listener for when the mouse leaves the canvas
        canvas.addEventListener("mouseout", () => isDrawing = false);
    </script>
</body>
</html>

CODE SIMULATION

kod

Facebook | Twitter | Linkedin | Whatsapp

index canvas api canvas drawing dynamic pen thi interactive can