Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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: https://i.stack.imgur.com/rU6ER.png


What I have tried:

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()}
	})
	  
	let miniCanvas = document.querySelectorAll('canvas')[_arg]
	miniCanvas.getContext('2d').drawImage(this.image, 0, 0)
}

var handler = new tempClass({src: 'vulture.png?var=' + Math.random()})

handler.drawCanvas(0)
handler.drawCanvas(1)
Posted
Updated 19-May-22 10:28am
v2

You need to assign the onload handler before you set the src; otherwise, if the image is already cached, or loads too fast, the load event could fire before the handler is attached.

Since you're using a modern browser, you'll probably also want to use a proper ES6 class.
JavaScript
const loadImage = (src) => new Promise(resolve => {
    const image = new Image();
    image.addEventListener("load", () => resolve(image));
    image.src = src;
});

class tempClass {
    #imagePromise;
    
    constructor(config) {
        this.#imagePromise = loadImage(config.src);
    }
    
    async drawCanvas(index) {
        const image = await this.#imagePromise;
        const miniCanvas = document.querySelectorAll('canvas')[index];
        miniCanvas.getContext('2d').drawImage(image, 0, 0);
    }
}

const handler = new tempClass({ src: `vulture.png?var=${Math.random()}` });
handler.drawCanvas(0);
handler.drawCanvas(1);
 
Share this answer
 
Hello vissaeus !

there are misuse of JS in your code,

tempClass is not a class as usual , you write it as an 'inline' function.
when you do :
var something = function() // it's an inline function declaration not a class/object.
Classes - JavaScript | MDN[^]


=================
=================
; closure .
ends your line of instructions with ";" it's securing execution and a well known ends for codelines ;;;;;;


=================
=================
one other thing , don't use native "src" attribute like that , you are going to confusion between object, and js resources.


=================
=================
in vulture.png?var= you can not use ? because it's request to server default symbols through a page call.


________________________________________________________________________
to debug easily a ~code :
- trace your var //
console.log(one_var);
console.table(array_var); with ; at ends
will display you if vars are stored or not in every location of your code, so in scope or in main.
 
Share this answer
 
Thank you friends. I didn't have time to test the solution but finally it worked for me. very well im fan of es5 :) thanks for your help and time. I really appreciate it.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900