Edit in JSFiddle

// grab the canvas element, get the context for API access and 
// preset some variables
var canvas = document.querySelector( 'canvas' ),
    c = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    distx = 0,
    disty = 0,
    width = 300,
    height = 300,
    hw = width / 2,
    hh = height / 2;

// resize the canvas
canvas.width = width;
canvas.height = height;

function draw() {

  if(document.querySelector('#fix').checked){
    // calculate the distance caused by the offset
    distx = mouseX - width / 2;
    disty = mouseY - height / 2;
  } else {
    distx = mouseX;
    disty = mouseY;
  }

  c.clearRect( 0, 0, width, height );
  // set the colour
  c.fillStyle = 'lime'; 
  c.save();
  c.translate( hw, hh );
  // start a path and paint a circle of 20 pixels at the mouse position
  c.beginPath();
  c.arc( distx, disty, 20 , 0, Math.PI*2, true );
  c.closePath();
  c.fill();
  c.restore();
}

// get the mouse position on the canvas (some browser trickery involved)
canvas.addEventListener( 'mousemove', function( event ) {
  if( event.offsetX ){
    mouseX = event.offsetX;
    mouseY = event.offsetY;
  } else {
    mouseX = event.pageX - event.target.offsetLeft;
    mouseY = event.pageY - event.target.offsetTop;
  }
  // call the draw function
  draw();
}, false );

<form><input type="checkbox" id="fix"><label for="fix">Fix mouse position</label></form>
<canvas></canvas>

*{margin:0;padding:0;}
canvas{background:#69c;}