canvas resize problem in IE

[roliveira]

1.Explanation:
On page load an object instance is created. This instance dynamically
creates a canvas tag and then appends it to the DOM. However, if the
canvas tag has already been created it skips the creation part and
goes directly to the dimensioning part (its size may need to be
redefined. In this case the initial width=400 and after redimension
width=530).

2.Problem:
On FF it works fine.
On IE it does not.
I'm using the DynamicInitializationCanvas.zip file and i've noticed
that it emulates <canvas> by creating this html structure:

<div>
<canvas id="stageCanvas" style="WIDTH: 530px; height: 400px" width="0"
height="0">
<div style="overflow: hidden; WIDTH: 400px; position: absolute;
height: 400px">
<shape style="width: 10px; position: absolute; height: 10px">
<stroke></stroke>
</shape>
<shape style="width: 10px; position: absolute; height: 10px">
<stroke></stroke>
</shape>
</div>
</canvas>
</div>

The problem is that when the canvas is redimensioned the first <div>
inside the <canvas> does not follow the width value of the <canvas>
itself. While the <canvas> new width is 530px, the <div> width inside
it is still 400px (the initial width).
I use the IE developerTollbar addon and if i change the <div> width to
530px, i get the result i want.

3.Code
The following code is part of the object instance i use to create the
<canvas> that does want i explained in 1:

if (this.canvasStage == null) // if <canvas> has not been created
{
// create <canvas>
var stageCanvas = excanvas(document.createElement('canvas'));
stageCanvas.id = 'stageCanvas';
// dimension <canvas>
if (this.getBrowser() == 'IE') // this.getBrowser() is a method of
my own
{
this.topolStage.appendChild (stageCanvas); // IE nedds to append
<canvas> before we define width and height
stageCanvas.style.width = this.getCurrentStageDim().width+'px';
stageCanvas.style.height = this.getCurrentStageDim().height+'px';
}
if (this.getBrowser() == 'FF')
{
stageCanvas.width = this.getCurrentStageDim().width;
stageCanvas.height = this.getCurrentStageDim().height;
}
// pass <canvas> to this.canvasStage
this.canvasStage = stageCanvas;
}
else // if <canvas> has been created just redefine width and height
{
if (this.getBrowser() == 'IE')
{
this.canvasStage.style.width = this.getCurrentStageDim().width;
this.canvasStage.style.height = this.getCurrentStageDim().height;
}
if (this.getBrowser() == 'FF')
{
this.canvasStage.width = this.getCurrentStageDim().width;
this.canvasStage.height = this.getCurrentStageDim().height;
}
}

Any idea?

[roliveira]

Well, i've just found one solution but not THE solution... i think...
What i've done is (for IE only):
If <canvas> has been created then remove it from the DOM, create it
again and append it to the DOM again.

However this doesn't look like THE solution because it may compromise
performance...

So I'm still looking for improvements.
Any help is welcome.

[Erik Arvidsson]

You should try the latest version in SVN. It does not wrap the canvas
in a div and it does not recreate the element like the old versions
do.

--
erik

[roliveira]

Thank you Eric for your time.
«You should try the latest version in SVN»

What do you mean by SVN?

[Erik Arvidsson]

Get the latest files from here:

http://excanvas.svn.sourceforge.net/viewvc/excanvas/

--
erik

[roliveira]

Well, i decided to do it in a diferent way, which i think is more
accurate.

I still want to do the same as before but let me explain in more
detail what i wantto do:

1.Explanation:
On page load an object instance is created. This instance dynamically

creates a canvas tag, draws some grid lines and then appends it to the
DOM. Then the user should be able to select a zoom view and the
drawing should be redrawn with a diferent scale.

2.The code
The code bellow should clear the drawing, scale it, and redraw it
again thus making a zoom effect.

function scaleStage() {
// clear canvas
this.canvasStage_ctx.clearRect(0, 0, this.getCurrentStageDim().width,
this.getCurrentStageDim().height);
// define new scale
this.canvasStage_ctx.scale(this.currentZoom[0],this.currentZoom[0]);
// draw vertical lines
var sumWidth = this.stageGridWidth; // first x position
while (sumWidth <= this.getCurrentStageDim().width)
{
this.canvasStage_ctx.moveTo(sumWidth,0);

this.canvasStage_ctx.lineTo(sumWidth,this.getCurrentStageDim().height);
sumWidth += this.stageGridWidth;
}
this.canvasStage_ctx.stroke();
//draw horizontal lines
var sumHeight = this.stageGridHeight; // first y position
while (sumHeight <= this.getCurrentStageDim().height)
{
this.canvasStage_ctx.moveTo(0,sumHeight);

this.canvasStage_ctx.lineTo(this.getCurrentStageDim().width,sumHeight);
sumHeight += this.stageGridHeight;
}
this.canvasStage_ctx.stroke();
}

3. The problem
In IE works fine.
In FF it does not.

What happens is that the new drawing is made with the new scale, but
the clearRect method doesn't seem to be working because the initial
drawing is still there.
Howerver, if scaleStage only calls clearRect (and don't draw anything)
the drawing is actually cleared.

Any ideas?

[gaoqingxin]

 
    Thank you.

---

> Date: Tue, 2 Sep 2008 10:50:06 -0700
> Subject: Re: canvas resize problem in IE
> From: mail.ro...@gmail.com
> To: google-...@googlegroups.com

[gaoqingxin]

 
   Thank you.

---

> Date: Tue, 2 Sep 2008 10:31:40 -0700
> From: erik.ar...@gmail.com
> To: google-...@googlegroups.com

> Subject: Re: canvas resize problem in IE
>

[roliveira]

Ok i've done it.

The problem with the code bellow is that it was missing the
beginPath() method before calling the lineTo method.

Thank you Eric for your time.

I haven't downloaded the latest version yet but i'm planing to.