DrawImage on canvas has weird aspect ratio in firefox and other problems

Question

I am running firefox 3.5.6.

I want to show an image on canvas and draw a couple of lines on it. It should display correctly in Firefox and Internet Explorer (using excanvas).

Here is what I get:

The top image is what I see in IE8, the bottom is what I see in firefox.

IE seems a bit flawed as the canvas is the wrong size, but firefox is going crazy! What gives with this aspect ratio? Why doesn't the second half of my arc appear? In addition, several times firefox simply flat shows nothing.

Here is my code, by the way.

Answer 1

Aspect ratio problem

If you do not set the width in the canvas element, by default it is 300x150. In CSS, you set the style to 94x120, so it scales the image to that size. To fix this, you need to either set the width and height in HTML, or using JavaScript.

In HTML:

 <canvas id="c" width="94" height="120">Ugh, this just ain't gonna work</canvas> 

In JavaScript (with jQuery):

 $('canvas').attr('width', '94').attr('height', '120'); 

Incorrect Internet Explorer Browser Size

Adding size to the canvas element should also fix this problem. Since IE uses VML instead of canvas to render the image, the CSS rule for the canvas will not apply. excanvas should see the specified size and apply it in IE.

Missing second half of the arc

The simpleArc function simpleArc not work in Firefox when the amplitude is negative. The problem is that a negative amplitude results in a negative radius for the arc, which is illegal according to

You can also preload all the images you need, instead of creating them when you need them. You still need to prevent code from running until all images have loaded.

Answer 2

I recently noticed that using a style to define width and height for canvas elements caused such a problem. Taking from the previous example

This works on FF 9.0.1 Mac

 <canvas id="c" width="94" height="120">Ugh, this just ain't gonna work</canvas> 

against.

It had similar display problems, like your example, in FF 9.0.1 Mac

 <canvas id="c" style="width:94;height:120;">Ugh, this just ain't gonna work</canvas> 

Maybe this?