javascript - Can't get sprite to move in a circle path -

i have sprite called snitch , i'm trying make move in circle, center in canvas/2 (canvas named space) , radius 30. i'm using following code doesn't seem anything, "snitch" stands there doing nothing on coordinates (0,0). i've tried deleting these (0,0) coordinates mysprite2 function when do, snitch doesn't appear.

var ctx = space.getcontext("2d");  var fps = 40; var snitch= new mysprite2("http://i.imgur.com/ignktbw.png");  function mysprite2 (img_url) {   var x = this.x = 0;   var y = this.y = 0;    this.visible= true;   var img = this.myimg2 = new image();   this.myimg2.src = img_url; }  mysprite2.prototype.do_frame_things = function() {   if (this.visible) ctx.drawimage(this.myimg2, this.x, this.y); };   function do_a_frame () {   ctx.clearrect(0, 0, space.width, space.height);   snitch.do_frame_things(); }  function themoves(snitch){   var theta = 0;   (theta = 0; theta < 2 * math.pi; theta+=0.1) {       snitch.x = (space.width/2) + math.sin(theta)*30;      snitch.y = (space.height/2) + math.cos(theta)*30;   } } setinterval(themoves, 1000/fps); setinterval(do_a_frame, 1000/fps); 

any idea wrong? ok got moving runs in straight line, instead of circle. new code below.

function mysprite (img_url) {   var x = this.x = (space_x/2);   var y = this.y = (space_y/2);   var angle = this.angle = 0;   this.visible= true;   var img = this.myimg = new image();   this.myimg.src = img_url; }  mysprite.prototype.do_frame_things = function() {   if (this.visible) ctx.drawimage(this.myimg, this.x, this.y); };    function themoves(){   snitch.x += math.cos(snitch.angle)*2;   snitch.y += math.sin(snitch.angle)*2; } setinterval(themoves, 40); 

the first error see sin function return undefined because need call using following syntax:

 math.sin() 

the second error snitch variable undefined. error thrown following line of code.

 snitch.x = (space.width/2) + math.sin(theta)*30; 

your third error is:

snitch.y = (space.height/2) + cos(theta)*30; 

i created more modular approach circular animation.

live demo: http://codepen.io/larryjoelane/pen/obgpwy

html:

     <canvas width ="500" height="500" id="canvasone"></canvas> 

javascript:

 var canvas = new canvas("canvasone");   var thiscanvas = canvas.instance("canvasone");   var imageurl = "http://bytewarestudios.com/assets/images/sphere.png";   var image = canvas.createimage(imageurl);   var context = canvas.context2d("canvasone");   /* formula determine x , y points on circumference of       * circle   * cx , cy = (origin or center of circle)   * r = radius of circle   * = angle in radians(360deg = 6.285714285714285714285714285714 radian) or 2 * pi   *  formulas examples below x , y points   *   var x = cx + r * math.cos(a);   *   var y = cy + r * math.sin(a);   */   //initialize degree variable  var deg = 0;   //frames per second  var fps = 45;   window.requestanimationframe(drawcircle); // start animation   function drawcircle() { //begin function     settimeout(function() {       //increment degrees      deg = deg + 1;       //used offset circle radius bring circle in border of       //the canvas      var offset = 120;       //radius of circle      var r = ((thiscanvas.width - offset) / 2);       //x coordinate of circle origin      var cx = ((thiscanvas.width) / 2);       //y coordinate of circle origin      var cy = ((thiscanvas.height) / 2);       //store angle in radians      var = canvas.toradians(deg);       var x = cx + r * math.cos(a);      var y = cy + r * math.sin(a);       //clear canvas        context.clearrect(0, 0, thiscanvas.width, thiscanvas.height);       //draw first image      context.drawimage(image, x, y);       //start animation      window.requestanimationframe(drawcircle);     }, 1000 / fps);   } //end function   function canvas() { //begin canvas constructor         canvas.prototype.createimage = function(imageurl) {       //create new image      var image = new image();       //set image source      image.src = imageurl;       //return image object      return image;     };     canvas.prototype.context2d = function(id) {       var canvas = document.getelementbyid(id);       var context = canvas.getcontext("2d");       return context;     };     canvas.prototype.instance = function(id) {       var canvas = document.getelementbyid(id);       return canvas;     };     canvas.prototype.toradians = function(angle) {       return angle * (math.pi / 180);     };   } //end canvas constructor