clearRect not working as expected in IE

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Try this code with explorercanvas:
https://developer.mozilla.org/samples/canvas-tutorial/2_1_canvas_rect.html

2.
3.

What is the expected output? What do you see instead?

Similar to what I see in Firefox and Safari :)
Right now I see that the whole canvas is cleared and only the stroke is
applied.

What version of the product are you using? On what operating system?

Explorer Canvas r3
WinXP/IE 7 (on OS X, VMware Fusion).

Please provide any additional information below.

Original issue reported on code.google.com by thomasan...@gmail.com on 23 Mar 2009 at 12:38

[GoogleCodeExporter]

This is a known limitation of Explorer Canvas. We might be able to do this with 
IE's 
filters (mask)

Original comment by erik.arv...@gmail.com on 24 Mar 2009 at 5:40

• Changed state: Accepted

[GoogleCodeExporter]

Yes, I have used CSS filters, and a shim gif to achieve this on a div.

Original comment by thomasan...@gmail.com on 24 Mar 2009 at 8:01

[GoogleCodeExporter]

Hi,

One way to 'fix' this is to replace the current clearRect() function. Hi have 
replaced ir with the following which works for me.

  contextPrototype.clearRect = function(aX, aY, aWidth, aHeight) {
    if ( aX == null && aY == null && aWidth == null && aHeight == null ){
      this.element_.innerHTML = '';
    } else {
      oldColor = this.fillStyle;
      this.fillStyle = document.bgColor;
      this.fillRect(aX, aY, aWidth, aHeight );
      this.fillStyle = oldColor;
    }
  };

Original comment by nils.lag...@bredband.net on 26 Jun 2009 at 12:25

[GoogleCodeExporter]

Maybe even better might be to see if the canvas itself has a background-color 
and 
use that, if not use the document background:

  contextPrototype.clearRect = function(aX, aY, aWidth, aHeight) {
    if ( aX == null && aY == null && aWidth == null && aHeight == null ){
      this.element_.innerHTML = '';
    } else {
      if ( this.canvas.style.backgroundColor != null && 
this.canvas.style.backgroundColor != "" ) {
        newColor = this.canvas.style.backgroundColor;
      } else {
        newColor = document.bgColor;
      }
      oldColor = this.fillStyle;
      this.fillStyle = newColor;
      this.fillRect(aX, aY, aWidth, aHeight );
      this.fillStyle = oldColor;
    }
  };

Original comment by nils.lag...@bredband.net on 26 Jun 2009 at 12:57

[GoogleCodeExporter]

Be careful with this. I have noticed that if you are doing animations and you 
don't
do a clearRect (clearing .innerHTML to "") every frame, IE starts to pile up 
memory
and gets hugely slow.

Original comment by mccor...@gmail.com on 29 Jun 2009 at 4:58

[GoogleCodeExporter]

That does not work. The cleared section needs to be transparent.

Original comment by erik.arv...@gmail.com on 30 Jun 2009 at 4:49

[GoogleCodeExporter]

Hi again,

The "fix" (notice the quotes...) was the only one that worked for me when I 
needed 
it. Clearing the canvas should actually be done using e.g. canvas.setAttribute
( "width", theWidth ); (See the HTML Draft).
Aware that the background should be rgba(0,0,0,0.0) but haven't been able to do 
this 
in a proper way in VML (not without traversing all shapes, changing their paths 
if 
they are covered by the clearRect and repaint... - not a good solution) - still 
working on it.

regards- N

Original comment by nils.lag...@bredband.net on 7 Jul 2009 at 10:01

[GoogleCodeExporter]

Hi

This is what I came up with for a project. 
Note: I am not a user of ExplorerCanvas so I am not sure if this is usable for 
this
project.

Example code:

<div id="overlay" 
style="position:absolute;top:0;left:0;width:1000px;height:1000px;
filter: progid:DXImageTransform.Microsoft.BasicImage(mask=1) alpha(opacity=50)">
  <img src="shim.gif" width="1000" height="1000"/> 
  <img src="pix.gif" width="100" height="100" style="position: absolute; top: 10px;
left: 10px; z-index: 1"/>
  <img src="pix.gif" width="200" height="300" style="position: absolute; top: 200px;
left: 200px; z-index: 1"/> 
  <img src="pix.gif" width="100" height="100" style="position: absolute; top: 300px;
left: 50px; z-index: 1"/> 

</div>

shim.gif is just a transparent gif
pix.gif is one pixel with some fill color

The first image (shim) is not necessary and is just a quick solution to make the
underlying content not selectable.

Best regards
Thomas Andersen

Original comment by thomasan...@gmail.com on 9 Aug 2009 at 1:07

[GoogleCodeExporter]

I think this behavior can be solved only with a Silvelight 3 version of 
excanvas,
using WriteableBitmap, to create a "transparent hole" in canvas...

I don't think that creating a clipping VML shape and pushing all elements into 
it
will be easy to do...

Original comment by maitred...@gmail.com on 17 Sep 2009 at 3:02