Scaled images
Ryan Schmidt
43.
Here's a test page I made:
http://www.ryandesign.com/tmp/excanvas-image/
It has two canvases. In the first canvas, I draw an image at its
native size. In the second canvas, I set the canvas scale to 8 x 8
and draw the image at 1/8th size. The end result in both canvases
should look the same, and is in Firefox and Safari and excanvas in
Silverlight mode.
The problem is that in IE 6 and 7 with excanvas in VML mode, the
scaled image is being downscaled to the smaller size, then upscaled
again, resulting in a great deal of pixelation.
In IE 8 with excanvas in VML mode, nothing is drawn at all, or at
least, the canvas seems to have 0 width and height, even though I am
setting the width and height in my script.
In IE 8 with excanvas in Silverlight mode, the canvas is drawn at
some default size I can't figure out how to change.
Can anyone help with these issues?
Greg Houston
<googl...@ryandesign.com> wrote:
> In IE 8 with excanvas in VML mode, nothing is drawn at all, or at
> least, the canvas seems to have 0 width and height, even though I am
> setting the width and height in my script.
I don't know if it is related, but I also had problems with scaling in
IE8 beta 2 IE8 standards mode using r43 that did not occur in IE6 and
IE7 with older versions of excanvas. I ended up having to set the
initial height and width of my canvas to values larger than I would
expect the canvas to ever become. This made it so part of the canvas
rendered after resizing the canvas. It would only render 10px wide and
a seemingly arbitrary maximum height. I then started resetting the
canvas width and height to those large values before each resize and
now the canvas renders fully in IE8 standards mode. I have no idea why
this hack worked, I was just trying anything I could think of.
So my suggestion, try setting the width and height of the canvas to a
large value before doing the excanvas initialization stuff. Initialize
the canvas. Then each time, before resizing the canvas to the size you
actually want it, set it to those large values and then immediately
set it to the size you do want it. Hopefully there is a better a
solution, but for the time being this might possibly get the canvas to
appear for you in IE8 standards mode. Note that I am not using images,
so I am not sure what effect all this resizing will have on the image
quality. In my case it just makes my application slower in IE8 than it
already was in IE6 and 7.
Also note that width and height here are referring to the width and
height element attributes, not the CSS width and height.
- Greg
Ryan Schmidt
> So my suggestion, try setting the width and height of the canvas to a
> large value before doing the excanvas initialization stuff. Initialize
> the canvas. Then each time, before resizing the canvas to the size you
> actually want it, set it to those large values and then immediately
> set it to the size you do want it. Hopefully there is a better a
> solution, but for the time being this might possibly get the canvas to
> appear for you in IE8 standards mode. Note that I am not using images,
> so I am not sure what effect all this resizing will have on the image
> quality. In my case it just makes my application slower in IE8 than it
> already was in IE6 and 7.
If I understand what you're suggesting correctly, then it's not
having any effect for me...
Even example 3 provided with excanvas exhibits these issues (no
canvas in IE8 in VML mode, wrong-size canvas in IE8 in Silverlight
mode -- it looks like it's 192x192 pixels). Does this example work
for anyone else in IE 8 beta 2?
Examples 1 and 2 work fine in either VML or Silverlight. Examples 1
and 2 statically create a 400x300-pixel canvas on the page. Example 3
creates a static no-dimension canvas and later sets its dimensions
via JavaScript. Setting the size of the canvas element statically
isn't really applicable in my case because I don't know what size
canvas I want until later, and I need to dynamically create the canvas.
Ryan Schmidt
Has anybody had a chance to look at these problems I reported in
December? Here is my test page again:
http://www.ryandesign.com/tmp/excanvas-image/
The problems are:
1. Pixelation when drawing an image with smaller-than-native
dimensions but with the canvas scale increased to compensate. This
works properly without pixelation in every other browser. This only
happens with the VML version of excanvas, so my workaround for now is
to use the Silverlight version of excanvas.
2. If the canvas width and height are set by script instead of in the
canvas tag, then the canvas is created with the wrong size and I
cannot find a way to change it. With the VML version of excanvas I
get a canvas size of 0x0 pixels and with the Silverlight version
192x192 pixels. This only affects IE 8 (I'm currently using IE 8 beta
2). My workaround for now is to use IE 8's compatibility view (in the
Tools menu).
I had a friend install IE 8 beta 2 and Silverlight on his system
tonight and he can confirm all of my findings above, so it's not just
my system.