canvas animation

by Soviut

HTML

<canvas id="c"></canvas>

CSS

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: cornflowerblue;
}

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var x = 0;
var y = 0;

var img = new Image();
img.src = 'http://www.w3schools.com/tags/img_the_scream.jpg';

$(window).resize(function(e) {
    fit();
    draw();
});

function fit() {
    canvas.width = document.width - 50;
    canvas.height = document.height - 50;
}
fit();

function draw() {
    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.save();
    ctx.drawImage(img,x,y);
    ctx.beginPath();
    ctx.arc(x,y,75,0,Math.PI*2,true);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

setInterval(function() {
    x += 5;
    y += 5;
    
    x = x > canvas.width ? 0 : x;
    y = y > canvas.height ? 0 : y;
    
    draw();
}, 20);