Dominik Seemayr Dominik Seemayr - 1 year ago 235
CSS Question

Blend mode:multiply in Internet Explorer

I need to have an Image blended together with an red square in mode multiply.
As I know, IE and Safari doesn't support the css-property "blend-mode", so I tried it with blending them together in a canvas and everything worked fine - except in IE.
Is there any way to get those blended together in IE or isn't that supported yet?

Answer Source

For Internet Explorer, Canvas blending modes are "under consideration".

http://status.modern.ie/compositingandblendingincanvas2d?sort=status&term=blend

Until blends are implemented in IE, you can roll-your-own multiply filter:

function multiply(R, G, B) {
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imgData.data;

  for (var i = 0; i < data.length; i += 4) {
    data[i    ] = R * data[i    ] / 255;
    data[i + 1] = G * data[i + 1] / 255;
    data[i + 2] = B * data[i + 2] / 255;
  }

  ctx.putImageData(imgData, 0, 0);
}

And this multiply image filter is cross-browser compatible too.