Support percent-based width/height

[GoogleCodeExporter]

I have an odd scenario - I want to use a fixed pixel coordinate size
(140x192) but stretch it to a dynamically computed size (width: 100%,
height: 100%) in CSS. (The canvas ends up being inside a fixed-size based
on font size, so it's not resizing on the fly or anything crazy like that.)

It turns out this works in Safari 3, Firefox 2, and Opera 9, using:

<canvas id="hires" width="140" height="192" style="width: 100%; height:
100%;"></canvas>

All three browsers appear to implement this similarly - the results look as
though a 140x192 bitmap was rendered to, then stretch-blitted to the
browser surface. The visual effect was actually better than I expected, as
I'm trying to emulate retro hardware. But I realize we're not going to get
that in IE with VML. (Silverlight, perhaps?)

I've actually implemented support for this as a patch on top of excanvas,
but as I'm using a dramatic subset of the excanvas features I haven't done
extensive analysis of the code to make sure my changes are complete and
don't break other functionality, so I'm reluctant to submit this as a patch
for inclusion as-is, but wanted to request the support and offer my diff
perhaps as inspiration.

I've attached the patch I'm using - note that it also scales stroke widths,
so that lines "fill space". If you want to see a demo, go to
http://www.calormen.com/Applesoft/ and pick the "DEMOS" sample, hit Run,
and try the Hires Demo. The results are close to identical on Safari,
Firefox, and Opera, and with my excanvas modifications it's certainly "good
enough" in IE.

Original report:

https://sourceforge.net/tracker2/?
func=detail&aid=1915280&group_id=163391&atid=827563

Original issue reported on code.google.com by erik.arv...@gmail.com on 2 Mar 2009 at 12:36

Attachments:

• excanvas.patch

[GoogleCodeExporter]

I am animating the size of each canvas element and am looking for similar
functionality as described here.

In the browsers that support canvas, the base value for the canvas size is the 
canvas
attributes width and height. Setting the CSS width and height then scales the 
canvas
accordingly.

If you start with this:

<canvas id="myCanvas" width="100" height="100"></canvas>

... and then change the CSS width and height both to 150px the canvas is scaled 
to 150%.

If you change the CSS width and height both to 100% the canvas is scaled 
accordingly.

I haven't tried the submitter's patch with percentage values, but with CSS 
values it
is not working.

Expected Result:
Change the CSS height and width of $('myCanvas') and the vml should scale 
accordingly.

Actual Result:
The vml does not scale during animation and actually has about twice the height 
than
what it has with the stable release of Excanvas. Basically the height is 
stretched,
yet this stretching is static. It is not something that is occuring while 
dynamically
changing the CSS height of $('myCanvas').

I would really like to see this implemented, I just don't think it is working
correctly yet with the submitter's patch.

Original comment by gregory....@gmail.com on 7 Mar 2009 at 8:01

[GoogleCodeExporter]

Scratch the part about the canvas being stretched vertically. That was caused 
by a
typo in my code.

I did do another test, this time changing the CSS values to 100% after creating 
the
canvas/vml. Nothing happened. If the submitter's patch does anything it may be 
that
it only works at the time the VML was created. Either that or I missing 
something.

So I guess my questions are:
1. Is it possible to resize VML after the VML has been created? From the link 
at the
bottom of this comment, I think it is possible.
2. If so, can this functionality be implemented in Excanvas?

I don't know if it might be helpful or not, but in DD_belatedPNG, it's author is
using VML for IE6 png support. In his code he has attached events to the 
original
element so if it's background is changed the vml will be updated accordingly.

See the readPropertyChange function here:
http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a.js

Perhaps when Excanvas initializes the element it could add event listeners to 
it such
as this, and if the CSS height or width of the element is changed then that 
could
fire a function that does whatever is necessary to resize the VML.

There is some discussion of resizing VML dynamically here:
http://groups.google.com/group/netscape.public.dev.xml/browse_thread/thread/cc04
a15427251f3a/d44ada9e9fedfd4b

I don't grasp it, but it sounds like it is possible.

Original comment by gregory....@gmail.com on 7 Mar 2009 at 8:54