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?