KineticJS canvas modified by CamanJS

Question

As you've discovered, Kinetic will redraw the original image when it internally redraws.

Your Caman modified content is not used or saved.

To keep your Caman effect, you can create an offscreen canvas and instruct your Kinetic.Image to get its image from that offscreen canvas.

Then you can use Caman to filter that canvas.

The result is that Kinetic will do its internal redraws with your Caman modified canvas image.

Demo: http://jsfiddle.net/m1erickson/L3ACd/

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/3.3.0/caman.full.min.js"></script>
<style>
    body{padding:20px;}
    #container{
      border:solid 1px #ccc;
      margin-top: 10px;
      width:350px;
      height:350px;
    }
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // create an offscreen canvas
    var canvas=document.createElement("canvas");
    var ctx=canvas.getContext("2d");

    // load the star.png
    var img=new Image();
    img.onload=start;
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/star.png";
    // when star.png is loaded...
    function start(){

        // draw the star image to the offscreen canvas
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);

        // create a new Kinetic.Image
        // The image source is the offscreen canvas 
        var image1 = new Kinetic.Image({
            x:10,
            y:10,
            image:canvas,
            draggable: true
        });
        layer.add(image1);
        layer.draw();

    }

    // lomo the canvas
    // then redraw the kinetic.layer to display the lomo'ed canvas 
    $("#myButton").click(function(){
        Caman(canvas, function () {
            this.lomo().render(function(){
                layer.draw();
            });
        });
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="myButton">Lomo the draggable Star</button>
    <div id="container"></div>
</body>
</html>