Estoy creando una animación de dibujo a mano usando lienzo. Este es el código que he escrito:

 <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(); };

Está funcionando como deseaba, pero quiero que un lápiz o una imagen similar a una mano sigan la ruta trazada para que parezca que el lápiz está escribiendo el contenido como en una pizarra. ¿Cómo puedo hacerlo así?