Edit in JSFiddle

var context;
var x=0;
var y=0;
var xShift=2;
var yShift=5;
var width, height;
        

canvas = document.getElementById('myCanvas');
if(!canvas || !canvas.getContext)
    return;
            
context = canvas.getContext('2d');
if(!context || !context.putImageData)
    return;
context= canvas.getContext('2d');
width=canvas.width;
height=canvas.height;
setInterval(draw,20);
        
function draw()
{
    context.clearRect(0,0,300,300);
    context.beginPath();
    context.fillStyle="green";
    context.arc(x,y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();  
          
    if(x+xShift > width || x+xShift < 0)
        xShift=0-xShift;
    if(y+yShift > height || y+yShift < 0)
        yShift=0-yShift;
          
    x+=xShift;
    y+=yShift;
}

<canvas id="myCanvas" height="300" width="300">
    Sorry, your browser doesn't support canvas!
</canvas>