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

[izkrivera]

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!

[izkrivera]

Apparently there is an issue with the syntax of the drop-shadow example in MDN. Fixing that resolved the issue.

[davidenke]

@izkrivera nice to hear :)

[cyrildiagne]

Hi! I'm also facing this issue. I couldn't find an alternative syntax that works.

drop-shadow(10px 10px 20px #000)