How to display multiple Canvas?

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?

Romin · Accepted Answer · 2012-09-06 09:23:04Z

2

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.

answered Sep 6, 2012 at 9:23

Romin

8,8462 gold badges26 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ron van der Heijden Over a year ago

+1 Thanks! I misunderstood the canvas element. Thought I made from my canvas an rectangle, but its in my canvas. Question: Is it better to use 1 canvas and add multiple rectangles or multiple canvas with single rectangles?

Romin Over a year ago

I would prefer one canvas and then have my drawing methods do the rest i.e. rectangles, lines, etc.

Collectives™ on Stack Overflow

How to display multiple Canvas?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related