Dominik Seemayr Dominik Seemayr - 4 months ago 82
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

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.