Flexible canvas in XUL

Question

Hi all, I have a XULRunner application that I want to have display 2d graphics in a HTML element. I would like to be able to repaint those graphics when the window resizes. The layout looks something like this:

<box flex="1" id="canvas-box">
<html:canvas id="canvas" flex="1">

</html:canvas>
</box>

First of all the "width" and "height" properties of the canvas element do not reflect its actual size on the screen. This causes the strokes to come out stretched strangely, since 1 unit in the x direction ends up being different than 1 unit in the y direction. Secondly, I can't get the onresize event to fire, regardless of whether I put it on the canvas or on the surrounding box.

The XUL tutorial does warn that there are layout weirdnesses that will occur when you use HTML elements inside your XUL app, but in this case I don't have a choice because I need 2d graphics. Any pointers?

EDIT For now I'm going to use SVG in the place of the canvas element. I'm in the preliminary stages of trying it out, but at least it doesn't seem to have the weird "stretching" problems that canvas was having.

Answer 1

Couldn't you just put an HTML frame/iframe in the XUL and put the canvas in there?

Answer 2

I thought onresize only worked on <window>, you could resize the canvas and repaint it from there.