function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}

// draws circle



function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
ctx.stroke();
}

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

//this draws the circle and clears it

function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d"); // sets drawing contex (2d) has built in functions (getContext function 2d means somethingto it
return setInterval(draw, 10); // draws the screen every 10 milliseconds
}



function draw() {
clear();
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "purple";
circle(x, y, 10);

//draw function I use