Асинхронность при отрисовки canvas JS
При отрисовки канваса вызываю onload.
Не понимаю как правильно задать промисы в onload. Помогите пожалуйста.
Console: null net::ERR_FILE_NOT_FOUND
Объект Image (асинхронный)
reader.onload @ main.js:428
Объект load (асинхронный)
download @ main.js:384
function download() {
for(let i=0;i<countFile;i++){
nowFile = i;
cx = fileArray[i][1];
ourfile = fileArray[i][2];
var commands = fileArray[i][3];
var reader = new FileReader();
reader.onload = function(){
image.onload = function() {
var color = cx.fillStyle, size = cx.lineWidth;
ratio = image.height / image.width
x = image.width;
y = image.height;
if(x >= 1300){
while(x >= 1300){
x -= (x*1.1-x)
y -= (y*1.1-y)
}
}
if(y >= 610){
while(y >= 610){
x -= (x*1.1-x)
y -= (y*1.1-y)
}
}
cx.canvas.width = x;
cx.canvas.height = y;
cx.drawImage(image, 0, 0, x, y);
cx.fillStyle = color;
cx.strokeStyle = color;
cx.lineWidth = size;
var fixlineWidth = cx.lineWidth
var fixstrokeStyle = cx.strokeStyle
for(let i=0; i<commands.length; i++){
if(commands[i][0] == 'Line'){
cx.lineWidth = commands[i][1];
cx.strokeStyle = commands[i][2];
cx.lineCap = "round";
flagLine = true;
for(let j=0; j<commands[i][3].length-1;j++){
cx.beginPath()
cx.moveTo(commands[i][3][j][0],commands[i][3][j][1]);
cx.lineTo(commands[i][3][j+1][0],commands[i][3][j+1][1]);
cx.stroke();
}
}
}
cx.lineWidth = fixlineWidth;
cx.strokeStyle = fixstrokeStyle;
console.log(cx.canvas)
}
image.src = reader.result;
};
reader.readAsDataURL(ourfile);
}
}