html5 - Creating objects in javascript as functions - and control them with arrow keys in game -

i trying make simple "game" in html5 (mainly javascript), move ball around.

i create ball (which can moved arrow keys) drawing circle on canvas. possible, or approach simpler?

i create function, have means selecting ball. anyways, able draw triangle, not circle. code:

var canvas = document.getelementbyid("mycanvas");  var ctx = canvas.getcontext("2d");    canvas.width = canvas.height = 500;    function circle() {      // circle - doesnt show      ctx.beginpath();      ctx.arc(50, 50, 25, 0, math.pi * 2, true);      ctx.fillstyle = "blue";      ctx.fill();  }    cicle();      function drawtriangle() {    // triangle - works    ctx.beginpath();    ctx.moveto(200, 100);    ctx.lineto(170, 150);    ctx.lineto(230, 150);    ctx.closepath();       // fill color    ctx.fillstyle = "rgba(255, 204, 0, 1)";    ctx.fill();  }    drawtriangle();

can figure, why circle doesn't appear? important: circle appears perfectly, when not part of function

p.s.: im new web development etc. advice

is possible that due typo when call circle function? circle() instead of cicle()