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>The problem is both are being drawn at the same time. One should follow after the other. Using promsises is it possible to delay the second function while the first function is getting executed and later execute second function? I tried reading on Promises a bit but I couldn't translate what I understood into code.
Thanks in advance.
Yes, you can use promises, altough for learning purposes you might want to write a pure callback solution first.
You'll want to have a look at my rules of thumb for promise development. Let's apply them here:
Every asynchronous function must return a promise.
These would be drawColorLine, draw, and requestAnimationFrame in your case.
As requestAnimationFrame is a native, primitively asynchronous function that unfortunately still takes a callback, we'll have to promisify it:
function getAnimationFrame() {
return new Promise(function(resolve) {
requestAnimationFrame(resolve); // this promise never gets rejected
// TODO: cancellation support :-)
});
}
Everything that follows an asynchronous action goes into a .then() callback:
function drawColorLine(start, end, color) {
… // initialisation
function draw() {
… // do work
// always return a promise:
if (/* furter work */) {
i++;
return getAnimationFrame().then(draw); // magic happens here :-)
} else {
return Promise.resolve(…); // maybe have a path object as eventual result?
// or anything else, including nothing (no arg)
}
}
return draw(); // returns a promise - but don't forget the `return`
}
Voila!
drawColorLine([40, 40], [100, 40], '#116699').then(function() {
return drawColorLine([40, 40], [40, 100], '#bb11dd');
}).then(console.log.bind(console, "both lines drawn"));
Collected from the Internet
Please contact debug[email protected] to delete if infringement.
Comments