var square;
var coordsx;
var coordsx2;
var coordsy;
var canvas;
var context;
var size;
var change;

window.onload = function() {
    console.log("JS Loaded");
    square = new Square();
    canvas = document.getElementById("sqrcontainer");
    canvas.width = document.documentElement.clientWidth;
    context = canvas.getContext('2d');
    coordsx = canvas.width / 2;
    coordsx2 = coordsx;
    coordsy = 50;
    size = 50;
    change = 1;
    setInterval(frame, 1000.0 / 60.0);
};

class Square {
    constructor() {}
    static draw(x, y, color) {
        context.fillStyle = color;
        context.fillRect(x, y, size, size);
    }
}

function frame() {
    canvas.width = document.documentElement.clientWidth;
    coordsx += 1;
    coordsx2 += change;
    Square.draw(coordsx, coordsy, '#f00');
    Square.draw(coordsx2, coordsy + 50, '#0f0');
    if (coordsx2 > canvas.width - size || coordsx2 <= 1) {
        change = -change;
    }
    if (coordsx > canvas.width - size) {
        Square.draw(coordsx - (canvas.width - size), coordsy, '#f00');
    }
    if (coordsx > canvas.width + size) {
        coordsx -= (canvas.width - size);
    }
}