Center Canvas Transformation

by digitarald

HTML

<div id="game">
    <canvas width="320" height="480"></canvas>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#game {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    user-select: none;
    -webkit-user-select: none;
}
#game canvas {
    background-color: rgb(255, 255, 224);
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

JavaScript

// Center scaled canvas on screen using CSS3

var Game = {

    init: function () {
        // Get DOM elements
        this.element = document.getElementById('game');
        this.canvas = this.element.firstElementChild;
        
        // Original content size
        this.content = [this.canvas.width, this.canvas.height];

        // Setting up the canvas
        var ctx = this.ctx = this.canvas.getContext('2d');
        ctx.fillStyle = '#6f8ed9';
        ctx.fillRect(0, 0, this.content[0], this.content[1]);
        
        // Create image on click
        this.element.addEventListener('click', this, false);
        
        // Load image to draw on click
        this.loader = new Image();
        this.loader.addEventListener('load', this, false);
        this.loader.src = 'http://mozorg.cdn.mozilla.net/media/img/styleguide/identity/marketplace/usage-logo-rocket.png';
        
        // Reflow canvas size/margin on resize
        window.addEventListener('resize', this, false);
        this.reflow();
    },

    reflow: function () {
        // 2d vectors to store various sizes
        var browser = [
            window.innerWidth, window.innerHeight];
        // Minimum scale to fit whole canvas
        var scale = this.scale = Math.min(
            browser[0] / this.content[0],
            browser[1] / this.content[1]);
        // Scaled content size
        var size = [
            this.content[0] * scale, this.content[1] * scale];
        // Offset from top/left
        var offset = this.offset = [
            (browser[0] - size[0]) / 2, (browser[1] - size[1]) / 2];

        // Apply CSS transform
        var rule = "translate(" + offset[0] + "px, " + offset[1] + "px) scale(" + scale + ")";
        this.element.style.transform = rule;
        this.element.style.webkitTransform = rule;
    },

    // Handle all events
    handleEvent: function (evt) {
        switch (evt.type) {
            case 'resize':
                // Window resized
               ...