Question

I tried to make a falling snow in canvas. The code works ok in Chrome but in FF18 nothing is displayed.

http://dharman.eu/flakes/

When I checked it in console Firebug throws this error:
An invalid or illegal string was specified
var s = flakes[flake].chara;
ctx.fillText(s,flakes[flake].x, flakes[flake].y);

Any Ideas what is wrong with my code?

Also The width of canvas element seems to be too big even though it is specified to be 100%. Why?

var screenH = window.innerHeight;
var screenW = window.innerWidth;
canvas.width = screenW;
canvas.height = screenH;

Answer 1

Move init(); to the bottom of your code and then it will work:

//...

$('#canvas').dblclick(function () {
    RunPrefixMethod(canvas, "RequestFullScreen");
});

//width/height 100%
var screenH = window.innerHeight;
var screenW = window.innerWidth;
canvas.width = screenW;
canvas.height = screenH;

init();  //<--here

Because screenH is not defined. (Strange…)

Demo: http://jsfiddle.net/DerekL/jNf47/

---

Bonus: Debugging

First, I know one of the variables in ctx.fillText is not defined, so I have to find out which one is it:

console.log(s,flakes[flake].x, flakes[flake].y);
//[some number], [some number], undefined)

So the problem is in flakes[flake].y. It seems like flakes[flake].y is referring to screenH, so that means screenH is the problem. Usually variables have to be defined before you call init(), so I just moved it to the bottom and it works.