2

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.

naugtur
  • 16,827
  • 5
  • 70
  • 113

3 Answers3

2

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]-->
Beygi
  • 1,918
  • 1
  • 16
  • 22
  • Looks promising. Is it a known bug with a publicly avaliable bug report, or you just happen to know that? – naugtur Jun 29 '11 at 13:31
  • No, i just find out, its about shape tags(g_vml_:shape), actually i didn't have enough time to find about details.I'd searched about it and what i found was nothing. – Beygi Jun 29 '11 at 13:46
  • I'll test it at home and if it works - it's a well earned bounty for you. – naugtur Jun 29 '11 at 14:08
  • Thanks and i'm finding the real problem for you, and just for fun: i just stop working on a project for some kind of government companies.its in my blood to find out about anything... :) – Beygi Jun 29 '11 at 14:49
  • Both methods work. I have no idea how you figured that out :). Huge thanks! – naugtur Jun 29 '11 at 17:15
1

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

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

More:

Community
  • 1
  • 1
Mrchief
  • 75,126
  • 20
  • 142
  • 189
  • IE8 doesn't support canvas. I am using code derived from pixastic fastblur in supporting browsers already. HTML5 canvas doesn't work in IE8. I use excanvas from google to draw on a canvas simulation that doesn't have methods allowing to get image and work with pixels. – naugtur Jun 29 '11 at 07:17
  • I'm aware of the fact that IE8 doesn't support canvas. Didn't know that excanvas doesn't have those methods. – Mrchief Jun 29 '11 at 14:19
  • There's a note in the comments inside excanvas.js that says what it lacks. It's quite informative. +1 for mentioning pixastic, which has the fastest blur I could find (`fastBlur`) – naugtur Jun 29 '11 at 17:11
0

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

Rob
  • 14,746
  • 28
  • 47
  • 65
  • No, it didn't. The filter works in IE8 and 9, but it doesn't blur the canvas for some reasom. In my example there's a bit of text at the bottom "this gets blurred" that is blured by every IE – naugtur Jun 26 '11 at 13:27