I am trying to write code for the above described problem. I tried finding a solution. This is what I currently have.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var drawColorLine = function(start, end, color) {
var deltaX, deltaY, i = 0,
currLength = 0,
isHor, isVert;
deltaX = end[0] - start[0];
deltaY = end[1] - start[1];
context.strokeStyle = color;
isHor = deltaX === 0 ? 0 : 1;
isVert = deltaY === 0 ? 0 : 1;
function draw() {
context.beginPath();
context.moveTo(start[0] + currLength * isHor, start[1] + currLength * isVert);
currLength = currLength + 0.5 * i;
context.lineTo(start[0] + currLength * isHor, start[1] + currLength * isVert);
context.stroke();
if (currLength <= Math.max(deltaX, deltaY)) {
i = i + 1;
requestAnimationFrame(draw);
}
}
draw();
};
drawColorLine([40, 40], [100, 40], '#116699');
drawColorLine([40, 40], [40, 100], '#bb11dd');
<canvas id='canvas' width='400' height='400'></canvas>
See Question&Answers more detail:os