How to insert an image on a canvas, NOT only at boot?

I have a canvas and I have to repeatedly use the same image. How can I burn it to a variable and then just pass in the ctx.drawImage? How to do it without img.onload?
const image = new Image();
image.src = src;
image.onload = () => {
texture = image;

I from the conditional code above to use a texture?
April 4th 20 at 00:50
1 answer
April 4th 20 at 00:52
With data URLS (RFC 2397).
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0j
guWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sjagvgoegv2xsbxqngypj/gAwXEQA7" width="16" 

By the way, the download will still. Just you transfer a picture from a separate file into the page, increasing load time. Sometimes it is justified. But if the images are large, you are simply depriving themselves of the opportunity to show some preloader to let the user not bored waiting.

Accordingly, your code should change like this:
const image = new Image();
image.src = strDataURI; // the picture is already in the row
texture = image;

Find more questions by tags CanvasDevelopment of games