javascript - Image not drawn on canvas until user clicks? -

i draw several images function performs similar to:

context.drawimage(img, width / 2 * (-1), height / 2 * (-1), width, height); 

i've read need wait image loaded before can draw it, this:

img.onload = function() {     context.drawimage(img, width / 2 * (-1), height / 2 * (-1), width, height); }; 

however causes image drawn afterwards, nothing drawn since call draw function every few milliseconds it's part of 'animation' loop simple game.

is there way can wait onload event before continue running code in init() function?

i suppose like:

var image_loaded = false; img.onload = function() {     image_loaded = true; }; if(image_loaded) {     animate(); } 

should work? unless need add timeout function keep calling init() until image_loaded true?

i created simple , small library make load of images easy.

check demo

see library code below:

// simple image loader library window.loader = (function () { var imagecount = 0; var loading = false; var total = 0;  // object hold image references var images = {};  // user defined callback, called each time image loaded (if not defined empty function wil called) function onprogressupdate() {}; // user defined callback, called when images loaded (if not defined empty function wil called) function oncomplete() {};  function onloadimage(name) {             ++imagecount;     console.log(name + " loaded");      // call user defined callback when image loaded     onprogressupdate();      // check if images loaded     if (imagecount == total) {         loading = false;         console.log("load complete.");         oncomplete();     }  };  function onimageerror(e) {     console.log("error on loading image: " + e.srcelement); }  function loadimage(name, src) {     try {         images[name] = new image();         images[name].onload = function () {             onloadimage(name);         };         images[name].onerror = onimageerror;         images[name].src = src;     } catch (e) {         console.log(e.message);     } }  function getimage(/**string*/ name){     if(images[name]){         return (images[name]);    }     else{         return undefined;      } }  // pre-load images , call oncomplete callback when images loaded // optionaly set onprogressupdate callback called each time image loaded (useful loading screens)  function preload( /**array*/ _images, /**callback*/ _oncomplete, /**callback <optional>*/ _onprogressupdate) {     if (!loading) {          console.log("loading...");         loading = true;          try {             total = _images.length;             onprogressupdate = _onprogressupdate || (function(){});             oncomplete = _oncomplete || (function(){});                              (var = 0; < _images.length; ++i) {                 loadimage(_images[i].name, _images[i].src);                                 }         } catch (e) {             console.log(e.message);         }     } else {         throw new error("acess denied: cannot call load function while there remaining images load.");     } }  // percentage of progress function getprogress() {     return (imagecount / total)*100; };  // return public stuff create our loader object return {     preload: preload,     getprogress: getprogress,     getimage: getimage,     images: images // have access array of images might useful not necessary }; })(); 

how works

to make sure images loaded , used application library have loader.preload method.

the preload method receive array of objects, each object containing name , src properties of image want load. optionally can setup oncomplete callback (to called when images loaded) , onprogressupdate callback (to called each time image loaded). onprogressupdate callback useful if want create loading screen application.

use loader.getprogress() obtain percentage of images loaded @ time.

to obtain reference of image loaded, call loader.getimage(name) name name property (a string) of image.

if reason needs iterate on images use loader.images. it's object containing references images in properties.

use this:

var images = [{name: "img1", src: "http://...a.."},                {name: "img2", src: "http://...b.."},               ...               {name: "imgn", src: "http://...n.."}];  function onprogressupdate(progress){     ...     drawprogressbar(progress); // example of can     ... }  function oncomplete(){     ...             // image loader object     var texture = loader.getimage("img2");     // or use this:     var texture = loader.images.img2; // or still loader.images["img2"]     ...      // iterate on images     (var img in loader.images){         console.log(loader.images[img].src);     }     .... }  loader.preload(images, oncomplete, onprogressupdate); 

check demo if didn't.