Issue 11 - explorercanvas - Support percent-based width/height

Issue 11:	Support percent-based width/height	‹ Prev 4 of 37 Next ›
	2 people starred this issue and may be notified of changes.	Back to list

Status:	Accepted
Owner:	erik.arvidsson
Type-Defect
Priority-Medium

Reported by erik.arvidsson, Mar 01, 2009

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

excanvas.patch
5.2 KB Download

Comment 1 by gregory.houston, Mar 07, 2009

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.

Comment 2 by gregory.houston, Mar 07, 2009

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/cc04a15427251f3a/d44ada9e9fedfd4b

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