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
Solution
With data URLS (RFC 2397).
Example
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0j
vb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAA
Re8L1Ekyky67QZ1hLnjM5UUde0ECwLJoexkcppv0accgcmtiheiueqjgaorcmxic6e0cc
guWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sjagvgoegv2xsbxqngypj/gAwXEQA7" width="16" 
height="14">

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:
Code
const image = new Image();
image.src = strDataURI; // the picture is already in the row
texture = image;

Find more questions by tags CanvasDevelopment of games