Edit in JSFiddle

$(document).ready(function() {
    var canvas = $("#myCanvas").get(0);
    var context = canvas.getContext("2d");
    var posX = 0;
    var posY = 75;
 
    function renderGrid(gridPixelSize, color)
    {
        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;
 
        // horizontal grid lines
        for(var i = 0; i <= canvas.height; i = i + gridPixelSize)
        {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }
 
        // vertical grid lines
        for(var j = 0; j <= canvas.width; j = j + gridPixelSize)
        {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }
 
        context.restore();
    }
 
    function renderContent()
    {
        context.save();
        renderGrid(20, "red")
        context.beginPath();
        context.fillStyle = "White";
        context.strokeStyle = "White";
        context.fillRect(posX, posY, 10, 10);
        context.restore();
    }
 
    function animationLoop()
    {
        canvas.width = canvas.width;
        renderContent();
        posX += 5;
        if (posX > 500)
            posX = 0;
        setTimeout(animationLoop, 33);
    }
 
    animationLoop();
});
 

<canvas id="myCanvas" width="500" height="500">
    <p>Canvas not supported.</p>
</canvas>

* {
    margin: 0; padding: 0;
}
html, body {
    height: 100%; width: 100%; background-color: #000000
}
canvas {
    display: block;
}