Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

421
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!