Добавление слоя JPEG в Canvas (используя Caman)

Question

У меня есть изображение, которое управляется с помощью библиотеки Caman.

Я пытаюсь наложить jpeg на управляемое изображение.

Я вижу, что jpeg появляется в течение секунды секунды под манипулируемым изображением, но быстро накладывается, когда манипулируемое изображение полностью загружается.

Независимо от того, в каком порядке код находится внизу, наложение изображения находится под управляемым изображением.

Есть ли очевидное решение? Спасибо!

<script> 
    $(function() { 

     var canvas = document.getElementById('image1'); 

     Caman("#image1", "pic.jpg", function() { 
      this.brightness(50).render(); 
     }); 

     //add text layer 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
      context.drawImage(imageObj, 69, 50); 
     }; 
     imageObj.src = 'yoda.jpg'; 

    }); 
    </script> 

Answer 1

Может нужно немного рефакторинга, но это, как я сделал это:

<script> 
    $(function() { 

     var canvas = document.getElementById('image1'); 

     Caman("#image1", "pic.jpg", function() { 
      this.greyscale().render(); 
      this.newLayer(function() { 
       var context = canvas.getContext('2d'); 
       var imageObj = new Image(); 
       imageObj.onload = function() { 
        context.drawImage(imageObj, 0, 0); 
       }; 
       imageObj.src = 'overlay.png'; 
      }); 
     }); 

    }); 
    </script>