CODEWITHSUNDEEP
javascriptinternet-explorercanvasfilterblur
naugtur
naugtur

Reputation: 16905

IE8 blur filter on a canvas

I've got a canvas that works thanks to Google's excanvas in IE. Now I want to blur the thing. I added a blur filter with the IE propertiary syntax and it blurred the canvas and the text inside a div.

Well... It did work in IE7 and IE9, but not in IE8. [WTF?!]

Hope somebody have seen that before.

I also tried to enable the blur from javascript after drawing on the canvas, but it didn't change anything.

Here's a live example:

http://jsfiddle.net/rd9q5/1/embedded/result/

The example is only the IE code. It won't work in other browsers, but my main code does.

I put an interesting image in the example for you to get amused while you help me. :)

[edit]

Generally blur works in IE8 - I put some text at the bottom of the div in my example page and the text gets blurred.

Upvotes: 2

Views: 1977

Answers (3)

Beygi
Beygi

Reputation: 1953

This is happening because of the 'position:absolute' specified on g_vml_:shape produced by excanvas.js line 597

Why?!...

Because there's a BUG in IE8 that elements with position other than static will not inherit filters of parent element, unless we do that.

To fix this do one of the following options

function go() {
    var browser = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);
    if(document.styleSheets['ex_canvas_'] && browser && browser[2].slice(0,1) == '8'){
        var stylesheet = document.createStyleSheet();
        stylesheet.owningElement.id = 'ex_canvas_';
        stylesheet.cssText = '#cp *{filter:inherit;}';
    }
    // codes for draw
}

Or

<!--[if IE 8]>
    <style type="text/css">
         #cp *{
             filter:inherit;
         }
    </style>
<![endif]-->

Upvotes: 2

Mrchief
Mrchief

Reputation: 76258

Take a look at this article. It's a long winded way but may help.

http://aautar.digital-radiation.com/blog/?p=2519

More:

Upvotes: 1

Rob
Rob

Reputation: 15168

Because Microsoft dumped 'filter' after IE7 so I'm surprised you say it works in IE9.

Upvotes: 0

Related Questions