Question

Currently I want to be able to display multiple canvas. My problem is that I’m only able to display one in Google Chrome. In FF it shows me the first canvas and shadow and from the second canvas only shadow.

Here is an example http://jsfiddle.net/ktVsF/

Bugs? Or bad coding?

Answer 1

The problem is due to the fact that you have not defined the height and width attributes of the <canvas> elements.

As per the HTML specification, “The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.”

So your default width and height is getting set to 300 and 150 and because of the your top,left, bottom,right attributes in rect, it is going out of the canvas size.

Set it explicitly to a larger width and height and you will see your rectangles.