Image loading inside for loop

Instead of using for , you can loop in a function each time an image loads.

// exemplo de uma array com caminhos de 4 imagens separadas por vírgula
caminhos = "https://homepages.cae.wisc.edu/~ece533/images/airplane.png,https://homepages.cae.wisc.edu/~ece533/images/arctichare.png,https://homepages.cae.wisc.edu/~ece533/images/baboon.png,https://homepages.cae.wisc.edu/~ece533/images/frymire.png";
var VARimg_categoria = caminhos.split(",");

var y = 0;
var image = new Image();
function carregaImagem(y){
    image.src = VARimg_categoria[y];
    image.onload = function(){
        // para exemplificar, esta linha joga as imagens dentro de uma div
        document.getElementById("dvd").innerHTML = document.getElementById("dvd").innerHTML+y+'.<img height="50" src="'+image.src+'" />';

        // faz o que quiser aqui após o carregamento da imagem

        y++; // incrementa o y para ver se ainda há imagens
        if(y < VARimg_categoria.length){
            carregaImagem(y); // próxima imagem a ser carregada
        }else{ // else opcional quando todas as imagens tiverem sido carregadas
            alert("Todas a imagens foram carregadas");
        }
    }
}
carregaImagem(y); // chama a função

Take a look at this Fiddle: link

If I understand correctly, your for loop has to stay out of everything:

for(var y = 0; y < VARimg_categoria.length; y++) {
    var image = new Image();
    image.src = VARimg_categoria[y];            
    image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.height = 250;
        canvas.width = 250;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        var imageData = canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg|jpeg);base64,/, ""); //remove mimetype

        DatecsPrinter.printImage(
            imageData, //base64
            canvas.width, 
            canvas.height, 
            1
        );
    }
}