Trying to request images and draw them inside a canvas

Questions
1

Hello, i’m trying to draw an set of images requested to a php file, this is because later i need to get the images or not depending of user login permisions…
I’m trying this way, but it doesn’t work.
I’ve the list of image ids inside an array named: items
I fill this array too from the database with a request. These code is not here.

The code in the template, a canvas for every item in the items array.

 {{#each items}}
      <canvas id="eventImgCanvas{{id}}" width="44" height="44"></canvas>
 {{/each}}

And here the function and the request that doesn’t work…

    function loadCanvas(imageDataRequested, idCanvas) {

      var canvas = document.getElementById('eventImgCanvas'+idCanvas);
      var context = canvas.getContext('2d');

      var imageObj = new Image();
      imageObj.onload = function() {
        // Here don't enter with the (A) versión, it enter with the (B) testing code
        console.log("drawing image...");
        context.drawImage(imageObj, 0, 0, 44, 44);
      };

       // (A) THE NEXT LINE DOESN'T WORK, dont' send any error, the image don't show: The imageDataRequested function parameter propertly contains the file data requested.
      imageObj.src = imageDataRequested;

      // (B) IF I CALL THE img.php FILE IN THIS WAY IT WORKS, but it's not the way needed:
      // imageObj.src = window.serverUrl + "img.php?obj_id="+ idCanvas +"&tipoimg=EVENT_P&subtipoimg=RD";
      // I need to get the image with a request bellow because i need to send the parameters in POST mode and send too other parameters like user login and token to manage permissions inside the php...
    }

    var lenghtItems = self.items.length;
    for (numItem = 0; numItem < lenghtItems; numItem++) {
      var idItem = self.items[numItem].id;
    
      app.request({url:window.serverUrl + 'img.php',method:'POST',data:{obj_id:idItem, tipoimg:"EVENT_P", subtipoimg:"RD"},
        error:function(xhr,status) {
          console.log(status + ":" + xhr.responseText);
          
        },
        complete: function(xhr,status){
          loadCanvas(xhr.responseText, xhr.requestParameters.data.obj_id);
        }
      })
      
    }

I’m working in the app i began to work some month before, i’m solving some problems by myself, but i dont manage to solve this one.

Thanks for your help

2

This code:

var imageObj = new Image();
      imageObj.onload = function() {
        // Here don't enter with the (A) versión, it enter with the (B) testing code
        console.log("drawing image...");
        context.drawImage(imageObj, 0, 0, 44, 44);
      };

       // (A) THE NEXT LINE DOESN'T WORK, dont' send any error, the image don't show: The imageDataRequested function parameter propertly contains the file data requested.
      imageObj.src = imageDataRequested;

Should work if image src is correct and reachable. Check the console, they might be some errors. Also try to add onerror handler for image as well