CODEWITHSUNDEEP
javascripthtmlcanvas
Vijay Kumar
Vijay Kumar

Reputation: 13

How to check if HTML5 Canvas blend modes are supported in my browser?

How to programatically find if my browser supports HTML5 blend modes ( http://www.w3.org/TR/compositing-1/#mix-blend-mode) ?

My code structure is as below

    var canvas = document.getElementById("Canvas");
    var context = canvas.getContext("2d");

    context.fillStyle = "#fff";
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.globalCompositeOperation = "source-over"
    context.globalCompositeOperation = "soft-light";
    if (context.globalCompositeOperation){
      //browser supports
      alert('true');
    }
    else {
      // browser doesn't support
      alert('false');
    }

But it doesn't seem to work correct. It alerts 'true' even in IE. (http://caniuse.com/#search=blend says blend mode is not supported in IE though)

Upvotes: 1

Views: 1006

Answers (1)

Blindman67
Blindman67

Reputation: 54026

You should use

context.globalCompositeOperation = blendMode;
if (context.globalCompositeOperation !== blendMode){
     // not supported mode
}

Upvotes: 1

Related Questions