JSFiddle - React, Tailwind, and code Playground

by pedro_g_s

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Freehand Gradient Stroke Drawing</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #000;
            cursor: crosshair;
        }
    </style>
</head>
<body>

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    let isDrawing = false;
    let startX = 0;
    let startY = 0;

    // Store the path points for applying the gradient across the entire stroke
    const points = [];

    // Function to set gradient for the entire stroke path
    function setGradient(xStart, yStart, xEnd, yEnd) {
        const gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd);
        gradient.addColorStop(0, 'red');
        gradient.addColorStop(1, 'black');
        ctx.strokeStyle = gradient;
        ctx.lineWidth = 5;
    }

    // Event listener for pointerdown (start drawing)
    canvas.addEventListener('pointerdown', (event) => {
        const rect = canvas.getBoundingClientRect();
        startX = event.clientX - rect.left;
        startY = event.clientY - rect.top;
        isDrawing = true;

        // Reset the points array and store the starting point
        points.length = 0;
        points.push({ x: startX, y: startY });

        // Begin drawing
        ctx.beginPath();
        ctx.moveTo(startX, startY);
    });

    // Event listener for pointermove (continue drawing)
    canvas.addEventListener('pointermove', (event) => {
        if (!isDrawing) return;

        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y =...