Question

I was writing some canvas code to draw a circle, but it never got painted. At last I found out it was because I had typed Math.Pi instead of Math.PI.

In Chrome Dev Tools I could see that Math.Pi was undefined, but it never threw any exceptions. Is this a bug in Chrome or is it actually legal to do calculations on undefineds?

Here is my code:

ctx.save();
ctx.lineWidth = 2;
ctx.fillStyle = '#FF0000';
ctx.beginPath();
ctx.arc(can.x, can.y, 15, 0, Math.Pi * 2, true);
ctx.fill();
ctx.restore();

ctx refers to canvas.getContext("2d");.

Answer 1

undefined * 2 evaluates to NaN, and the canvas 2D context specification says:

Except where otherwise specified, for the 2D context interface, any method call with a numeric argument whose value is infinite or a NaN value must be ignored.

So, a ctx.arc call with an argument of NaN means that the call is silently ignored (i.e. nothing is drawn), rather than an error is thrown.