Adding JPEG layer to Canvas (using Caman)

Question

I have an image that is manipulated using the Caman library.

I am trying to overlay a jpeg to the manipulated image.

I can see the jpeg appearing for a split second beneath the manipulated image, but it is quickly overlaid once the manipulated image fully loads.

No matter what order the code is in below, the overlay image lies beneath the manipulated image.

Is there an obvious solution to this? Thank you!

    <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

Might need a little refactoring, but this is how I did it:

    <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>