how to move object in circle forward and backward in html5 canvas?

Question

I am developing a small app in html5 canvas. I need to move a object in circular motion using keyboard keys . I am able to move the object using keyboard keys but there are bugs .The object do not move back ward or forward from the same position .Can any body help me completing this.

Please check the code from following. Any kind of help will be highly appreciable

http://jsfiddle.net/tmrhq6s5/

if ( !window.requestAnimationFrame ) {
    window.requestAnimationFrame = ( function() {

        return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

            window.setTimeout( callback, 100 / 60 );

        };

    } )();
}

var canvas = document.getElementById('scene');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var velocityX = -10;
var velocityY = -10;
var gravity = 0;
var w = canvas.width;
var h = canvas.height;
var angle = 3 * Math.PI / 180;
var cx = 200;
var cy = 200;
var radius = 100;
canvas.onclick = myClick;
canvas.addEventListener( "keydown", doKeyDown, true);
function myClick(e) {


    // A simpler function:
    //mouse = getMouse2(e);
//    alert(e.pageX + ',' + e.pageY);


}

function doKeyDown(e) {
window.requestAnimationFrame(redraw);
// get which key the user pressed
    var key = event.which;

    // Let keypress handle displayable characters
    if (key > 46) {
        return;
    }

    switch (key) {
        case 37:
            // left key

            // move the ball 1 left by subtracting 1 from ballX
              window.requestAnimationFrame(redrawreverse);



            break;

        case 39:
            // right key

            // move the ball 1 right by adding 1 to ballX
           window.requestAnimationFrame(redraw);



            break;


    }



}

function draw(x, y) {

    ctx.save();
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(x , y , 10, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
};


var i = 0;
var redraw = function() {
     // increase the angle of rotation
        angle +=  1.9*Math.PI / 180;

        // calculate the new ball.x / ball.y

        var newX = cx - radius * Math.cos(angle);
        var newY = cy - radius * Math.sin(angle);
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();
        // draw
        draw(newX, newY);
// alert(" ~~x"+newX+" ~~y "+newY)
   //window.requestAnimationFrame(redraw);
};

var redrawreverse = function() {
     // increase the angle of rotation

 angle +=  1.9*Math.PI / 180;
        // calculate the new ball.x / ball.y

        var newX = cx + radius * Math.cos(-angle);
        var newY = cy + radius * Math.sin(-angle);
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();
        // draw
        draw(newX, newY);
  // alert(""+newX+" ~~y "+newY)

   //window.requestAnimationFrame(redraw);
};
window.requestAnimationFrame(redraw);
window.addEventListener("keydown", doKeyDown, true);

Answer 1

Using a keymap object makes it easier...

if ( !window.requestAnimationFrame ) {
  window.requestAnimationFrame = ( function() {

    return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

      window.setTimeout( callback, 1000 / 60 );

    };

  } )();
}

var canvas = document.getElementById('scene');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var angle = 0;
var cx = 200;
var cy = 200;
var radius = 100;
var speed = 0.1;

var keymap = {
  left: false,
  right: false
};

function doKeyDown(e) {
  var key = event.which;
  switch (key) {
      
    case 37:
      keymap.left = -1;
      break;

    case 39:
      keymap.right = 1;
      break;

  }
}

function doKeyUp(e) {
  var key = event.which;
  switch (key) {
      
    case 37:
      keymap.left = 0;
      break;

    case 39:
      keymap.right = 0;
      break;

  }
}


function drawCircle(x, y, r, c, s) {
  ctx.fillStyle = c;  
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, false);
  ctx.closePath();
  if(s) ctx.stroke();
  else ctx.fill();
}


function redCircle() {
// increase the angle of rotation
  
  var direction = keymap.left + keymap.right;
  angle +=  speed * direction;

  var x = cx + (radius * Math.cos(angle));
  var y = cy + (radius * Math.sin(angle));
  
  drawCircle(x, y, 10, 'red');

}

var redraw = function() {
  ctx.clearRect(0, 0, w, h);
  drawCircle(cx, cy, radius, 'black', 'stroke');
  redCircle();
  window.requestAnimationFrame(redraw);
};


window.addEventListener("keydown", doKeyDown, true);
window.addEventListener("keyup", doKeyUp, true);

redraw();

html {
    height: 100%;
}
body{
    padding: 0; margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
/* Some basic styling */
#scene {
	display: block;
	border: 1px solid blue;
	margin: 50px auto;
}

<canvas id="scene" width=400 height=400></canvas>