We had to create the following small application on paper for some exam. Not in ECMAScript though, in Java. Fun! A moving clickable square is essentially the same application (minus the bugs), but written using canvas. I have issues with Firefox though (again). What’s up with its color handling? I get an exception for the values I’m using which are strings with a CSS <color> value as described in the canvas specification.
Also, the specification says to ignore “invalid values.” You should never throw because of them, basically.
The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'.
So you need Math.round in line 23.
Not that you should use canvas when you only need to draw rectangles though. HTML will do just fine. And if you need circles or something, SVG seems a better choice, because you need to move things.
You'll also need the position: relative; on the canvas selector, so that Firefox is happy with layerX/Y.
Cool, forgot about Opera not parsing rgb() values completely correct. Although it does make sense if you want to allow more colors. And yeah, I guess I could have used HTML. Next time.
A moving clickable square (<div> edition). I hope you enjoy it.
There is some code which works by accident: !containerChildren.length == 0, which is the same as (!containerChildren.length) == 0. This works because !containerChildren.length is only true for 0, and false for other values, and false is equal to 0, while true isn't.
Note that you don't really need the if in getColor and you could alternatively write addSquare like this:
function addSquare() {
container = container.appendChild(document.createElement('div'));
}
Thanks Sjoerd, cleaned it up now.