Canvas 2d Circle + Accelerometer API (still need lots editing)

accelerometer.js

// The watch id references the current `watchAcceleration`
    var watchID = null;
 
    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);
 
    // device APIs are available
    //
    function onDeviceReady() {
        startWatch();
    }
 
    // Start watching the acceleration
    //
    function startWatch() {
 
        // Update acceleration every <3 seconds
        var options = { frequency: 300 };
 
        watchID = navigator.accelerometer.watchAcceleration(movingCircle, onError, options);
    }
 
    // Stop watching the acceleration
    //
    function stopWatch() {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    }
 
   function movingCircle (acceleration) {
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var x = acceleration.x;
        var y = acceleration.y;
        ctx.fillStyle = "rgba(255, 255, 0, .5)";
        ctx.beginPath();
        ctx.arc(47.5,25,20,0,2*Math.PI, true);  //Tried changing 47.5 to x and 25 to y but doesn't work
        ctx.stroke();
        ctx.closePath();
        ctx.fill();
   }
    // onError: Failed to get the acceleration
    //
    function onError() {
        alert('onError!');
    }

accelerometer_worked_a_bit.js

// The watch id references the current `watchAcceleration`
var watchID = null;
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
    startWatch();
}
// Start watching the acceleration
//
function startWatch() {
// Update acceleration every 20 milliseconds
    var options = { frequency: 50 };
    watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// Stop watching the acceleration
//
function stopWatch() {
    if (watchID) {
    navigator.accelerometer.clearWatch(watchID);
    watchID = null;
    }
}
//moved but circle is slow and need to clear the previous circle
    function onSuccess (acceleration) {
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    // get device width and height use
    // document.documentElement.clientWidth;
    // or
    // document.body.clientWidth;
    var widthBody = document.body.clientWidth;
    var heightBody = document.body.clientHeight;
    var x = acceleration.x;
    var y = acceleration.y;
    var xcircle_position = 47.5 + (x/9.81*widthBody);
    var ycircle_position = 25 + (y/9.81*heightBody);
    ctx.fillStyle = "rgba(255, 255, 0, .5)";
    ctx.beginPath();
    ctx.arc(xcircle_position,ycircle_position,20,0,2*Math.PI, true);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();

    var element = document.getElementById("accXY");
    element.innerHTML = "X: " + acceleration.x + "<br>" +
                        "Y: " + acceleration.y + "<br>";
}
// onError: Failed to get the acceleration
//
function onError() {
    alert('onError!');
}