davidenke/context-filter-polyfill

Polyfills `CanvasRenderingContext2d.filter` capability of adopting CSS3 filters to canvas contexts at least partially.

context-filter-polyfill's Issues

Any way to support globalCompositeOperation?

Without this polyfill, globalCompositeOperation works in a 2d canvas on iOS 16, while filter does not.
With this polyfill, globalCompositeOperation does not work at all, while filter does work as expected on iOS - although it possibly leaks memory - iPhone gradually gets very hot.

If there's another solution that gets both to work on iOS, I'd be open to try it, but in its current state, this polyfill is a no go. Any plans to update it?

the ctx.clearRect method doesn't work

bug preview

the ctx.clearRect method doesn't clear
https://jsfiddle.net/zakariamouhid/4wpmb3ut/2/

solution

should simply call the original clearRect

context-filter-polyfill/src/patches/method.patches.ts

Lines 22 to 25 in 17e4a91

	// do not apply on mirror
	if (this.canvas.__skipFilterPatch) {
	return original.call(this, ...args);
	}

should add clearRect

 // do not apply on mirror 
 if (this.canvas.__skipFilterPatch || member === 'clearRect') { 
   return original.call(this, ...args); 
 } 

solution preview

https://jsfiddle.net/zakariamouhid/4wpmb3ut/3/

not all the files copied while installing plugin

I try to install the plugin in vue.js/typescript project using NPM, but the result of the install is just the dist/ folder and index.js.

How do we properly install and setup the plugin for use?

Any plan on supporting custom filters with url

Just asking if there's an interest of adding support to url custom filter here

Using blur on canvas, draw different color than actual

Hi,
i am drawing steight blur line on image canvas, then set it to src.

canvas blur is not suppoted on iphone, so i am using your plugin.

but, it shows different colors for blur lines only on iphone.

any solution / fix on this plz.

Conflicts with fabric.js

It changes the default CanvasRenderingContext2d and therefore while adding text to canvas the method does not work properly.

Can you please help fix this?
Thanks in advance.

Only draws a rectangular portion of the image/canvas in Safari

In Safari version 12.1.1 (14607.2.6.1.1) in MacOS 10.14.5 this module draws a partial rectangle of the whole image on the canvas with the filter applied. Removing the ctx.filer = ... renders the whole image again. In Chrome or Firefox there is no issue.

require('context-filter-polyfill');

const drawImagesInCanvas = (canvas, imageDescriptors, includeAll = true) => {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)';
  for (const imageDesc of imageDescriptors) {
    if (!includeAll && !imageDesc.include) { continue; }
    const { image, rotation } = imageDesc;
    const size = imageDesc.resize ? imageSizeThatFitsInSize(image, new Size(canvas.width, canvas.height)) : new Size(image.width, image.height);
    if (rotation > 0) {
      // save the unrotated context of the canvas so we can restore it later
      // the alternative is to untranslate & unrotate after drawing
      ctx.save();

      // move to the center of the canvas
      ctx.translate(canvas.width / 2, canvas.height / 2);

      // rotate the canvas to the specified degrees
      ctx.rotate(rotation * Math.PI / 180);
      ctx.drawImage(image, size.width / -2, size.height / -2, size.width, size.height);

      // we’re done with the rotating so restore the unrotated context
      ctx.restore();
    } else {
      ctx.drawImage(image, 0, 0, size.width, size.height);
    }
  }
};

Screenshot in Chrome: http://www.isaacrivera.com/canvas/chrome.png

Screenshot in Safari: http://www.isaacrivera.com/canvas/safari.png

Please advise!

shadowContext canvas is using the default canvas size of 300x150

bug preview

https://jsfiddle.net/zakariamouhid/4wpmb3ut/

solution

set the shadowContext canvas size

shadowContext.canvas.width = context.canvas.width;
shadowContext.canvas.height = context.canvas.height;

context-filter-polyfill/src/filters/drop-shadow.filter.ts

Line 6 in 17e4a91

const shadowContext = document.createElement('canvas').getContext('2d');

solution preview

https://jsfiddle.net/zakariamouhid/4wpmb3ut/1/

Error when filters are empty

Thank you for the polyfill!
Just a minor bug, when filters doesn't match it fails with cannot use .map of undefined, while in normal browser works fine

context-filter-polyfill/src/utils/filter.utils.ts

Line 11 in 17e4a91

.map(filter => filter.match(/([-a-z]+)(?:\((.*)\))?/i).slice(1, 3) as [AvailableFilter, string])

Wondering how typescript could compile this?

Problem with CropperJs

Hello,

I was using this with CropperJs to edit images in IOS safari, but after using CropperJs crop() function this canvas seems to stay cropped for the next time I load a image into CropperJs. Do you know any fix for this?

Thanks!

Unusable with picajs

Hi,

Thanks for your code it's very usefull, however I can't use it with picajs.

In my app I use pica js for resizing pictures, when I use your polyfill I have an error:

[Pica: cannot use getImageData on canvas, make sure fingerprinting protection isn't enabled]

Internally pica use this code to check if browser block fingerprinting with getImageData

function can_use_canvas(createCanvas) {
  var usable = false;

  try {
    var canvas = createCanvas(2, 1);
    var ctx = canvas.getContext('2d');
    var d = ctx.createImageData(2, 1);
    d.data[0] = 12;
    d.data[1] = 23;
    d.data[2] = 34;
    d.data[3] = 255;
    d.data[4] = 45;
    d.data[5] = 56;
    d.data[6] = 67;
    d.data[7] = 255;
    ctx.putImageData(d, 0, 0);
    d = null;
    d = ctx.getImageData(0, 0, 2, 1);

    if (d.data[0] === 12 && d.data[1] === 23 && d.data[2] === 34 && d.data[3] === 255 && d.data[4] === 45 && d.data[5] === 56 && d.data[6] === 67 && d.data[7] === 255) {
      usable = true;
    }
  } catch (err) {}

  return usable;
};

function createCanvas(width, height) {
  var tmpCanvas = document.createElement('canvas');
  tmpCanvas.width = width;
  tmpCanvas.height = height;
  return tmpCanvas;
}
can_use_canvas(createCanvas)

Can you help me with this issue I really would like to use your polyfill with picajs

ctx.lineTo does not remember previous position

When I try to draw on my canvas, where each touchmove event calls ctx.lineTo and ctx.stroke, only a stroke is drawn for the first point. I assume this is because the context of where the path is, is lost after the drawing function stroke is called? But maybe I missing something else?

I was able to get the drawing working again by calling ctx.moveTo and manually setting to the previous point before each ctx.lineTo call. However, for other reasons this workaround didn't solve this issue for me.

After looking at your code a bit, I set Object.defineProperty(canvasElement, '__skipFilterPatch', { value: true }) on my drawing canvas because I don't need the ctx.filter on this particular canvas at all, I just use it with another canvas. This solves it for me at least. On the other canvas your polyfill works really well, thank you very much for this library!

the ctx.fillRect method doesn't work

1. While using fillRect() on drawing, it draws at width of 300, 150 instead of canvas's width and height

 

Code Changes:

 

Bug Line:

 

Fix Line:

 

2. Stroke color and fill color of context changes while calling setTransform() method in polyfill

 

Code Changes:

 

Bug:

 

Fix:

Correct way to polyfill?

Howdy, I could not figure out the right way to use this polyfill in an npm project (simple create-react-app for example).

Eventually, I copied the contents node_modules/context-filter-polyfill/dist/index.js into a <script> tag in my head, and this worked but feels like the wrong way to do it.

What's the correct way?