centering responsive

by Nick Hulea

HTML

<canvas id="myCanvas" style="" />

CSS

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                border: 0;
                overflow: hidden;
                /*  Disable scrollbars */
                display: block;
                /* No floating content on sides */
            }
            canvas {
                display:block;
            }

JavaScript

var canvas = document.getElementById('myCanvas');
var W = window.innerWidth;
var H = window.innerHeight;
var m = Math.min(W, H);
var s = m * 0.0025;
canvas.width = W;
canvas.height = H;
var image = new Image();
image.src = 'http://t2.gstatic.com/images?q=tbn:ANd9GcQQveW9AJCxOC8Phnq3vptJIxPFHlxNw63q4pudc66dM4O96vtm';

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

var draw = function () {
    var m = Math.min(W, H);
    var s = m * 0.0025;
    console.log(s);

    ctx.save();
    ctx.drawImage(image, (canvas.width / 2), (canvas.height / 2 - (image.height * s) / 2), (image.width) * s, (image.height) * s);
    ctx.restore();

    ctx.save();
    ctx.drawImage(image, (canvas.width / 2 - (image.width * s)), (canvas.height / 2 - (image.height * s) / 2), (image.width) * s, (image.height) * s);
    ctx.restore();
};

draw();

//CENTER EVRYTHING 
var resizeCanvas = function () {
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
    draw();
    //particles_two();
};

window.addEventListener('resize', resizeCanvas, false);