game development with javascript question

Question

both of these seem to be identical but the one on the top doesn't produce a red circle like the one on the bottom does and I cant seam to figure out why. The bottom code was copy and pasted from the code repo and the one on top I typed out myself.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

context.arc(x, y, 50, 0, 2 * Math.Pi);
context.fillstyle="red";
context.fill();

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();

Answer 1

Syntax error: fillstyle on the first one

Answer 2

Wow thank you!

Answer 3

PI is typed as Pi in the top one