Image loses CamanJS effect when manipulating canvas

Question

I have a canvas that processes images drawn on it using CamanJS , and it works great. But if I manipulate the canvas manually (without the help of a plugin), the image loses its effect. For example, if I add a filter (like Vintage) to the image, it works fine, but if I rotate the canvas using translateand scale, the canvas reverses, but the image loses effect. It seems that every time you change the image through the plugin, it retains its current state, and therefore the effect is lost after the change without using it. How to do this while saving image effects?

To add to the effect, use the same examples of the plugin site, since the code for changing 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);
    });
});

Variables filtro_widthand filtrocorrespond to the image drawn on the canvas.

in 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 manipulate the canvas outside the Caman library, you need to use the method reloadCanvasDatato reinitialize the images stored in Caman, otherwise it uses only the first + that 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>

Run codeHide result