offscreencanvas.filter.js

Enable keyboard shortcuts

var getRegularContextForFilter = function(filter, pattern) {

  var c = document.createElement("canvas");

  c.width = c.height = 80;

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

  ctx.filter = filter;

  ctx.drawImage(pattern, 5, 5);

  ctx.drawImage(pattern, 25, 25);

  ctx.drawImage(pattern, 45, 45);

  return ctx;

};

var matchImageDataResults = function(offscreenImage, regularImage, filter) {

  assert_array_equals(offscreenImage, regularImage,

      "The image data generated by filter " +

      filter +

      " should be the same for both OffscreenCanvas and regular canvas");

};

var createPatternCanvas = function() {

  var patternCanvas = document.createElement('canvas');

  patternCanvas.width = 20;

  patternCanvas.height = 20;

  var patternCtx = patternCanvas.getContext('2d');

  patternCtx.fillStyle = '#A00';

  patternCtx.fillRect(0, 0, 10, 10);

  patternCtx.fillStyle = '#0A0';

  patternCtx.fillRect(10, 0, 10, 10);

  patternCtx.fillStyle = '#00A';

  patternCtx.fillRect(0, 10, 10, 10);

  patternCtx.fillStyle = "#AA0";

  patternCtx.fillRect(10, 10, 10, 10);

  return patternCanvas;

};

var filters =    [ "none"          ,

      "blur(10px)"                 ,

      "brightness(40%)"            ,

      "contrast(20%)"              ,

      "drop-shadow(0 0 5px green)" ,

      "grayscale(100%)"            ,

      "invert(100%)"               ,

      "opacity(50%)"               ,

      "saturate(20%)"              ,

      "sepia(100%)"                ,

      "sepia(1) hue-rotate(200deg)",

      "url(#url)"                  ];