Deviant Login Shop  Join deviantART for FREE Take the Tour
×

More from deviantART



Details

Submitted on
January 13, 2011
Link
Thumb

Stats

Views
9,915 (3 today)
Favourites
0
Comments
74
×
What Can Be Done About 3 Gotchas in IE9 Beta


I just spent the past couple of days porting and debugging deviantART muro in Internet Explorer 9 beta.  Microsoft announced with much fanfare that they included support for <canvas> in IE9.  Unfortunately I took their word at face value and assumed that my existing HTML5 code would seamlessly start working once I changed X-UA-Compatible.  Alas, I instead stared in horror at my application that appeared to be possessed by some insane daemon.

I remember taking a C class when I was 14 years old, and the teacher went on about how great C was because it was portable.  I spent a week doing my first assignment on my PC in Turbo C++, and then showed up at the computer lab full of NeXT workstations the morning the assignment was due expecting it to just work.  One would think I would have learned from the ensuing traumatic experience, but here I am 20 years later still believing vendors when they say their implementations fit a standard.  In my defense, Chrome, Firefox, Opera, and Safari did an amazing job of coding to the HTML5 spec.  I don’t know why Microsoft couldn’t as well.

The following is a list of several IE9 gotchas that I ran into.  I am sure that there are more - this is only the result of kicking the tires.  It is also just the stuff that I ran into with deviantART muro, other applications will care more about other parts of the canvas feature set.


globalCompositeOperation

The Problem
IE ignores changes to context.globalCompositeOperation, always behaving like it is set to “source-over.”

Why This Matters
This is the biggest problem I have run into.  A canvas implementation without globalCompositeOperation is like having a salad bar with no lettuce.  There must be a million uses for globalCompositeOperation.  Set it to “destination-out” and you have an eraser.  You can use it to mask out shapes, or combine it with a pattern to create textured lines.  I would hope that Microsoft plans to implement it by the time they make a final release, to claim to have support for canvas without it would truly be an embarrassment.

Test Case

ctx.strokeStyle = 'rgba(255, 0, 0, 1)';                                                                                        
    ctx.lineWidth = 10;
    ctx.globalCompositeOperation = 'source-over';                                                                                  
            
    ctx.beginPath();                                                                                                               
        ctx.moveTo(0, 0);
        ctx.lineTo(100, 100);
    ctx.stroke();                                                                                                                  
                                                                                                                                   
    ctx.strokeStyle = 'rgba(0, 255, 0, 1)';                                                                                        
    ctx.globalCompositeOperation = 'destination-out';      
                                                                             
    ctx.beginPath();                                                                                                               
        ctx.moveTo(0, 100);                                                                                                        
        ctx.lineTo(100, 0);
    ctx.stroke();



Workaround
There is not a good workaround for this.




Canvas Resizing

The Problem
When a canvas is resized by changing the style.width or style.height, IE9 clears the canvas and resets the context.  Note that style.width is not the same as the width attribute of the canvas.  Having <canvas width=”50” height=”50” style=”width: 100px; height:100px”></canvas> would be equivalent to having a 50x50 pixel image that you stretch to 100x100px in a browser.  All browsers reset the canvas when you change the width or height attribute, but only IE resets the canvas when style.width or style.height is changed.

Why This Matters
Applications can zoom in and out of certain areas of a canvas by leaving the drawing as is and changing the style.width and/or style.height.

Test Case

// Start with a canvas that is 100x100px
ctx.strokeStyle = 'rgba(255, 0, 0, 1)';                                                                                        
ctx.lineWidth = 10;
                
ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
ctx.stroke();
                
jQuery('#testCanv').width(101).height(101);
                    
ctx.strokeStyle = 'rgba(0, 255, 0, 1)';                                                                                        
ctx.beginPath();                                                                                                               
    ctx.moveTo(0, 100);                                                                                                        
    ctx.lineTo(100, 0);
ctx.stroke();



Workaround
Grab a copy of all the data in your canvas before you change its size, and paste it after you are done resizing.  All context settings must also be saved and reset.  We would have to change our test case code to:

// ... snip
ctx.stroke();
           
var tmpData = ctx.getImageData(0, 0, 100, 100);     
jQuery('#testCanv').width(101).height(101);
ctx.putImageData(tmpData, 0, 0);
ctx.lineWidth = 10;
                    
ctx.strokeStyle = 'rgba(0, 255, 0, 1)';
// snip ...





Limited Shadow Offset

The Problem
IE9 places an arbitrary limit on how high you can set shadow offsets using shadowOffsetX and shadowOffsetY.  Brief testing shows that the limit seems to be dependent on various random factors.  I have not yet reverse engineered the algorithm for how the limit is determined, but so far I have usually seen it to be a couple thousand pixels.

Why This Matters
I am sure that many people reading this think that I am complaining about an inconsequential implementation detail, but it actually does matter.  For all of the great things that canvas has to offer, it lacks in its ability to create soft lines.  Fortunately though, it can do a lot of fancy stuff with shadows, so you can draw with soft lines by drawing out of the canvas’ viewport and casting a shadow over to where you need the soft lines.  If you plan to make complex drawings on a large canvas, and you do not want to worry about your fake lines that are casting shadows coming into view when you pan and zoom, it is helpful to be able to set the shadow offset to a really large number.

Test Case

ctx.lineWidth = 10;                                                                                                            
    
ctx.shadowColor = 'rgba(255, 0, 0, 1)';
ctx.shadowBlur = 40;
ctx.shadowOffsetX = 10000;
ctx.shadowOffsetY = 0;                                                                                                         
    
ctx.beginPath();                                                                                                               
   ctx.moveTo(-10000, 0);                                                                                                     
   ctx.lineTo(-9900, 100);
ctx.stroke();



Workaround
You can use smaller versions of shadowOffset (though until the algorithm for how the limit is determined is discovered, you will never know for certain if you are safe).  At times you might have to change the offset and split up your strokes to make sure that things that are supposed to remain offscreen stay offscreen.

Edit:
Please see this blog article for further discussion between the author and a Microsoft Technical Evangelist: blogs.msdn.com/b/giorgio/archi…

Add a Comment:
 
:icondarthobiwan:
DarthObiwan Featured By Owner Feb 17, 2011
Hmm.. I just tried all the test cases in IE9 RC with the the IE Test Drive canvas test pad
[link]
The first two are now working as expected.
The third was is pretty close but looks like the blur effect levels are a bit different.
ctx.shadowBlur =8; instead of ctx.shadowBlur =40;
Reply
:icondarthobiwan:
DarthObiwan Featured By Owner Feb 17, 2011
Any updates on the IE9 RC, were the issues fixed? I see that global­Composite­Operation was updated.
Reply
:iconfrancoisdewynter:
FrancoisDeWynter Featured By Owner Jun 18, 2011
Because of some serious performance issues with Google Mail (business version of email) and dA, I was forced to upgrade from IE 8 to 9. The performance problem is fixed however, I cannot click on the link to submit a photo to a group - or any other embedded link on the right side of a page. This is a serious problem because I am a co-founder of a group. I have tried compatibility mode - I turned it on for every site - but the problem remains. I did get the link to work once but it hasn't since. Ideas? Solution?
Reply
:iconfrancoisdewynter:
FrancoisDeWynter Featured By Owner Jun 18, 2011
It is worse than I thought....... I can't select a category for an image I want to upload nor can I use any of the buttons associated with uploading.
Reply
:icondenisdlugas:
DenisDlugas Featured By Owner Jun 21, 2011   General Artist
I have the very same problem... do you have any solution yet? If so please let me know... thanks in advance!!! :aww:
Reply
:iconmrluigifreak101:
MrLuigiFreak101 Featured By Owner Jan 30, 2011  Hobbyist Interface Designer
IE overall needs to get its act together, it's just a pain to code specifically for IE >_<
Reply
:icontimacheson:
timacheson Featured By Owner Jan 17, 2011
IE9 is currently the best web browser for HTML5, as confimed by the W3C:


[link] (Slashdot)


[link] (ZDNet)


Of course, no browser is 100% compliant with HTML5, and furthermore version 5 of the HTML specification is still a draft document and subject to change.



However, the "developer" in question has gone to tremendous lengths to find excuses to criticise IE9 Beta (note that IE9 does indeed remain a beta release; it's not the finished product yet). It's quite a piece of work, and I'm impressed -- it must have been an extraordinary project to encounter the points raised all at once. He does a professional job of producing what resembles a serious piece of negative viral marketing.


It doesn't take much imagination to guess about who might be behind this "developer" and his findings. Unfortunately, corporate propaganda is often reported as news, even when it is often misleading and serves no constructive purpose.
Reply
:icontimacheson:
timacheson Featured By Owner Jan 17, 2011
IE9 is currently the best web browser for HTML5, as confimed by the W3C:


[link]


[link]


Of course, no browser is 100% compliant with HTML5, and furthermore version 5 of the HTML specification is still a draft document and subject to change.



However, the "developer" in question has gone to tremendous lengths to find excuses to criticise IE9 Beta (note that IE9 does indeed remain a beta release; it's not the finished product yet). It's quite a piece of work, and I'm impressed -- it must have been an extraordinary project to encounter the points raised all at once. He does a professional job of producing what resembles a serious piece of negative viral marketing.


It doesn't take much imagination to guess about who might be behind this "developer" and his findings. Unfortunately, corporate propaganda is often reported as news, even when it is often misleading and serves no constructive purpose.
Reply
:iconyeomeu:
yeomeu Featured By Owner Jan 16, 2011
Microsoft has been saying "it'll all be fixed in the next version" since Windows 1.03, their DOS "runtime environment". Some skepticism of their chorus of fanbois who repeat this refrain is warranted.

Second, recall this article's framing and place in the overall dialog: MS has been saying "we're ahead of the industry," and this article says, "no, you're not."

Third, now that we have two competitive open source rendering engines (WebKit and Gecko), is it really a high enough bar that the standards be open? I think in 2011 the implementation needs to be open as well. Raising that bar could help a bit to avoid balkanizing open standards through crappy implementations. "Open implementations" blocks some of the cheating they've been doing on benchmarks, too.
Reply
:iconmarkaja:
MarkAJA Featured By Owner Jan 15, 2011
By 'Every Other Browser' I assume you are referring to browsers built using Netscape code
and 'IE9 only' you are referring to browsers build around IE9 code.
There should be a green line in your demo as you have included code to draw a green line?
Netscape has converted 'rgba(0,255,0,1) to 'rgba(0,0,0,1)
Very strange.
Reply
Add a Comment: