Dynamically load image to canvas & add data to array/object

[OAFC_Rob]

for(var i=0; i < result.rows.length; i++) {
            
            var item = result.rows.item(i);
            
            if ($('#test').attr('src') != item.photo) {
                
                $('#test').attr('src', item.photo);
                
                var canvas  = document.getElementById('canvas2');
                var context = canvas.getContext('2d');
                
                $('#test').load(function() {
                    
                    context.drawImage(this, 0, 0);
                    
                    item.uploadPhoto = canvas.toDataURL();

                    console.log("PHOTOS");
                    console.log(item);

                    _modifiedData[table].push(item.uploadPhoto);
         
                });
                
            }

I basically have image pathways coming from a DB and I want to get the canvas dataurl information for them. My idea is to retrieve the data push the image pathway to the image object load that into a canvas object get the data to an object.

 

Once the data is in an object I need to preform a AJAX call to push this data to a PHP server to save the image. 

 

The problem I am having is the image load is happening after the AJAX call, and I can't figure out how to delay it.