Image loses effect of CamanJS on manipulate canvas

Question

I have a canvas, which handle images drawn on it with the CamanJS plugin and it works perfectly. But if I manipulate the canvas manually (without the aid of plugin) the image loses its effect. For example, if I add a filter (Vintage, for example) to the image, works perfectly, but if I turn the canvas, using translate and scale the canvas is reversed but the image loses its effect. It seems that with each change in the image through the plugin, it saves its current state, and therefore, the effect is lost after a change without using it. How to do this while preserving the effects of the image?

To add to the effect, use the same examples of the plugin site, since the code to reverse the canvas is ( scripts.js ):

$(document).ready(function() {
    $("html, body").on("click", "#vintage", function() {
        Caman("#filtrar", function() {
            this.vintage().render();
        });
    });

    $("html, body").on("click", "#inverter_foto", function() {
        var c = $("#filtrar")[0];

        var ctx = c.getContext("2d");

        ctx.translate(filtro_width, 0);
        ctx.scale(-1, 1);
        ctx.drawImage(filtro, 0, 0);
    });
});

The filtro_width variables and filtro correspond to the image drawn on the canvas.

on HTML:

<canvas id="filtrar" width="640" height="255"></canvas>

<button id="vintage">Vintage Effect</button>
<button id="inverter_foto">Reverse</button>

<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
</script>
<script type="text/javascript" src="/js/caman.full.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>

Example:

Answer 1

If you do manipulate the canvas outside of the Caman library, you need to use the reloadCanvasData method to reinitialize the imageData stored in the Caman object, otherwise, it only uses the first one + what it updated itself.

 vintage.onclick = function() { Caman("#filtrar", function() { this.vintage().render(); }); }; inverter_foto.onclick = function() { var c = $("#filtrar")[0]; var clone = c.cloneNode(true); var ctx = clone.getContext("2d"); ctx.translate(c.width, 0); ctx.scale(-1, 1); ctx.drawImage(c, 0, 0); var oCtx = c.getContext('2d'); oCtx.clearRect(0, 0, c.width, c.height); oCtx.drawImage(clone, 0, 0); if(check.checked){ Caman("#filtrar", function() { this.reloadCanvasData(); }); } }; var filtro = new Image(); filtro.crossOrigin = 'Anonymous'; var filtro_width = filtrar.width / 2; filtro.onload = function() { filtrar.getContext('2d').drawImage(this, 0, 0, filtrar.width, filtrar.height); }; filtro.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script> <p>First revert the image then apply the effect</p> <button id="inverter_foto">Reverse</button> <button id="vintage">Vintage Effect</button> reloadCanvasData<input id="check" type="checkbox" checked/> <canvas id="filtrar" width="640" height="255"></canvas>