the code gets stuck in a promise (prom1) when image onload. I using await promise inside drawCanvas() because i need to work with this.image after it has loaded.
vulture.png:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<style>body{margin:0;padding:0;background:rgb(30,60,90);}
canvas{border:1px solid white;background-color:white}
</style>
<canvas id="canvas2" width="120" height= "144" style="border:1px solid black;margin:0 auto;display:block;background:lightgray"></canvas>
<canvas id="canvas3" width="120" height= "144" style="border:1px solid black;margin:0 auto;display:block;background:lightgray"></canvas>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
JavaScript:
var tempClass = function(_cfg) {
this.image = new Image()
this.image.src = _cfg.src
}
tempClass.prototype.drawCanvas = async function(_arg) {
let prom1 = await new Promise(resolve => {
this.image.onload = _=> {resolve()}
})
console.log('done: ' + _arg)
}
var handler = new tempClass({src: 'vulture.png?var=' + Math.random()})
handler.drawCanvas(1)
handler.drawCanvas(2)vulture.png:
