Camanjs Clear Canvas When Init Caman()?

I apply Caman Filter to a canvas with existing image data. But when I create Caman object to use later, it emply my canvas. var ca = Caman('#myCanvas'); I'm try to do exactly with

Solution 1:

You don't need to grab a reference to the Caman object with: var ca = Caman("#myCanvas");

First, draw something on the original canvas:

// make a drawing on the original canvasvar canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,60,40);

Then tell Caman to use #myCanvas as both the source and destination for any filters:

// modify the original drawing from #myCanvas and put it back on #myCanvasCaman("#myCanvas",function(){
    this.brightness(50).render();
});

About your cleared canvas:

Since Caman uses .getImageData, be sure your image is hosted on the same site as the web page you're serving otherwise a CORS security violation will cause your canvas to be blank.

var canvas = document.getElementById("original");
var ctx = canvas.getContext("2d");

// make a drawing on the original canvas
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 60, 40);

// modify the original drawing Caman("#original", function () {
    this.brightness(75).render();
});

<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script><canvasid="original"width=100height=100></canvas>