$( document ).ready(function() {
    $("body").append($("<button id='btn'>play</button>"));
    $("body").append("<canvas id='cnv'></canvas>");
    var canvas = $("#cnv")[0];
    canvas.width = 800 //document.width is obsolete
    canvas.height = 800 //document.height is obsolete
   // canvasW = canvas.width;
   // canvasH = canvas.height;
    $("#btn").click(play);

});

function loadTimer()
{
    $("#timers").append(createTimer());
}

function createTimer()
{
    var timer = "<div class='timer'>End: <input type='text'><button>delete</button></div>";
    return timer;
}

function play()
{
    var timer = setInterval(timerFunction, 1000);
}

function drawCircle(x,y)
{
    var canvas = $("#cnv")[0];
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(x,y,50,0,2*Math.PI);
    ctx.fill();
}

function timerFunction()
{
    var width = document.body.clientWidth;
    height = document.body.clientHeight;
    var x = getRandomInt(0, 800);
    var y = getRandomInt(0, 800);
    drawCircle(x,y);
}

function getRandomInt(min, max) {
    var value = Math.floor(Math.random() * (max - min + 1)) + min;
    if (value + 50 > 800)
        value -= 800-50;
    return value;

}