IMGFX.JS

All parameters list and default values

                   
      mode: "tv",//DIFFERENT MODES : "tv","glitch","zoom","rotozoom","pixelate","kaleid","bumpingrect","crazyrect",
      
      canvassize:2,//DEVIDE SIZE TO IMPROVE CANVAS PERFORMANCES The more you reduce the size the more you gain perf but you get bigger pixels

     
      blendMode: "difference",//DEFINE A globalCompositeOperation BLEND MODE FOR FX THAT USE IT

      crossOrigin:"Anonymous", //Define CORS param



      //TV SIMULATOR SPECIFIC CONTROLS
      noise: true,//ENNABLE NOISE LAYER
      grainsize: 1,//NOISE GRAIN SIZE
      desyncspeed: 5,//SYNC DISPLACEMENT SPEED
      syncup: true,//TRUE IMAGE MOVE UP FALSE IMAGE MOVE DOWN
      scanspacing: 22,//SPACE BETWEEN SCANLINES
      scanheight: 4,//SIZE OF SCANLINES
      scanspeed: 1,//SCANLINE DISPLACEMENT SPEED DEFAULT MOVE DOWN, NEGATIVE INT MOVE UP
      flickerseed: 10,//FLICKERING LESS THE NUMBER MORE IT FLICKERS    
      latunsync: 0,//DISPLACE IMAGE RANDOMLY ON X AXIS
      sidenoise: "left", // DRAW LATERAL NOISE LAYER options:"left","right","both","none" 
      sidenoiseforce: 8,//MAX FORCE OF SIDENOISE
      Themecolor: "#f00",//DEFINE A COLOR OF TV

      //BASE64GLITCH SPECIFIC CONTROLS
      base64glitchforce:0,//BASE64 DESTROY
      base64glitchInterval:300,//

      //LATERAL GLITCH SPECIFIC CONTROLS 
      glichforce: 80,
      glitchclear: true,
      glitchdisplayimage: true,

      //PIXELLATE SPECIFIC CONTROLS
      pixelsize: 100,//MAX SIZE 
      squared: true,//SQUARED PIXELS pixel width = pixel height
      smooth: false,//ENNABLE SOOTHING
      
      //BOUNCING RECT SPECIFIC CONTROLS
      //THIS FX USE THE blendMode PARAMETER
      rectNum: 4,//HOW MANY BOUNCING SQUARES
      rectSquare: false,//SQUARES OR RECTANGLES
      rectSpeed: 6,//DISPLACEMENT SPEED
      rectClear: true,//CLEAR SCREEN EVERY FRAME?


      ///ZOOM SPECIFIC CONTROLS
      zoomRotationSpeed:1,
      zoomSpeed:0.05,
      zoomMinScale:0.001,
      zoomMaxScale:15,
      zoomXframe:30,


     //ROTOZOOM SPECIFIC CONTROLS
      rotozoomSpeed:0.01,//ZOOMING SPEED 
      rotozoomRotateSpeed:0.2,//ROTATION SPEED [use max as 0.9999...]
      rotozoomMaxScale:5,//MAX ZOOM
      rotozoomMinScale:0.001,//MAX DE-ZOOM

     
     //KALEIDOSCOPE SPECIFIC CONTROLS
     thetaAngle:360,
     thetaDiv:30,

     //RANDOMRECT SPECIFIC CONTROLS
     rdmMaxRect:20,///MAX NUMBER OF RECTANGLES
     rdmClearBeforeDraw:true///clear canvas every frame                   
                   
                                        
                   

Help Wanted!!

This plug-in have some isues, and if you know well JQuery and would kindly like to help, this are the thing that i want to fix.
When you instantiate the plug-in a window.requestAnimationFrame or setInteval loop is triggered. If you remove the dynamicly generated canvas element from the DOM, those process are still running in background. I would like to add a .destroy() function that kill everything from an instance of the plug-in but don't know how to do that.
I know it's not really clear but if you ennable the javascript console (firebug or chrome dev tool) and trigger the TV simulator , I left a console log in the window.requestAnimationFrame that logs "im here". If you click Re-print image the loop is still running and still eating CPU. Question is how to kill this? (I know clearInterval() and cancelAnimationFrame() but dont know how to trigger it when output canvas is removed). Please have a look at the source. Every link to usefull documentation, or advice from clever coder can be helpfull !
Feel free to contact me via github, or my website.