javascript - Using callback to get image pixel data -

i relatively new javascript. concept of callbacks confusing me bit coming oop background

i trying create hidden canvas image object , pixel data.

i have imageobject on want store properties image, pixels , on.. inside start() , first references maincanvas , mainctx. load image , once image drawn, store pixel data in imageobject.pixels

however inside start(), code runs asynchronously , log statement display imageobject.pixels return null

how use callbacks solve this?

below code

imageobject = {}; var mainctx; var maincanvas; //get image pixel properties  function start() {     maincanvas = document.getelementbyid("canvas");     mainctx = maincanvas.getcontext('2d');     imageobject.image = loadimage();     console.log(" image pixels " +imageobject.pixels); // -> displays null because code runs asynchronously, how use callback here avoid this?  }  function loadimage() {     var image = new image();     image.src = 'image.jpg';     image.addeventlistener('load',function()         {             mainctx.drawimage(image,maincanvas.width/2,maincanvas.height/2);             console.log("width here" +image.width+ " maincanvas " +maincanvas+ " mainctx " +mainctx+ " image " +image);             imageobject.pixels = getimagepixels(image); //-> store pixel data in image          });     return image;  }   function getimagepixels(img) {     var c = getcanvas(img.width,img.height);     var ctx = c.getcontext('2d');     return ctx.getimagedata(0,0,c.width,c.height); }  function getcanvas(w,h) {     var c = document.createelement('canvas');     c.width = w;     c.height = h;     return c; }  start(); 

simple add new function called when process finished. change

function start() {     maincanvas = document.getelementbyid("canvas");     mainctx = maincanvas.getcontext('2d');     imageobject.image = loadimage();     console.log(" image pixels " +imageobject.pixels); // -> displays null because code runs asynchronously, how use callback here avoid this?  } 

to

function start() {     maincanvas = document.getelementbyid("canvas");     mainctx = maincanvas.getcontext('2d');     imageobject.image = loadimage(); } 

and change

function loadimage() {     var image = new image();     image.src = 'image.jpg';     image.addeventlistener('load',function()         {             mainctx.drawimage(image,maincanvas.width/2,maincanvas.height/2);             console.log("width here" +image.width+ " maincanvas " +maincanvas+ " mainctx " +mainctx+ " image " +image);             imageobject.pixels = getimagepixels(image); //-> store pixel data in image          });     return image;  } 

to

function loadimage() {     var image = new image();     image.src = 'image.jpg';     image.addeventlistener('load',function()         {             mainctx.drawimage(image,maincanvas.width/2,maincanvas.height/2);             console.log("width here" +image.width+ " maincanvas " +maincanvas+ " mainctx " +mainctx+ " image " +image);             imageobject.pixels = getimagepixels(image); //-> store pixel data in image              done();         });     return image;  } 

and add this

function done() {     console.log(" image pixels " +imageobject.pixels); // -> displays null because code runs asynchronously, how use callback here avoid this?  }