Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

427
Vistas
How to make a pen or a hand follow a path?

I am creating a hand draw animation using canvas. This is the code I have written:

<div class="container">
            <div class="topButtons">
                <select id="svgDropDown">
                    <option value="-1" selected="selected">Select SVG</option>
                    <option value="0">Hello</option>
                    <option value="1">Curve</option>
                    <option value="2">Line</option>
                    <option value="3">Happy</option>
                </select>
                <button id="playBtn" onclick="handleClick()">Play</button>
            </div>
            <canvas id='canvas' width='600' height='300'></canvas>
        </div>


function handleClick() {
    var e = document.getElementById("svgDropDown");
    var option = e.value;
    if (option == -1)
        window.alert("Select SVG First");
    else
        create(option);
}

function create(option) {

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var offset = 1846;
    var pathMap = paths[option].path;
    var p = new Path2D(pathMap);

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.fillStyle = "#333";
        ctx.rect(0, 0, 600, 300);
        ctx.fill();


        ctx.beginPath();
        ctx.strokeStyle = 'lightgreen';
        ctx.lineCap = "round";
        ctx.setLineDash([1846, 1846]);
        ctx.lineWidth = 4;
        ctx.lineDashOffset = offset;
        ctx.stroke(p);
    }
    var btn = document.getElementById("playBtn");
    function animate() {
        offset -= 2;
        draw();
        var lineDraw = setTimeout(animate, 5);
        if (offset <= 0) {
            clearTimeout(lineDraw);
            btn.disabled = false;
        }
        else
            btn.disabled = true;
    }

    animate();

};

It is working as I desired, but I want a pen or a hand like image to follow the traced path so that it appears as if the pen is writing the content just like in whiteboard. How can I do it so?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda