Canvas Resizing

At the moment, smooth resizing up doesn't work well in chrome. That means, whenever possible, I should make a canvas larger and then resize it down.

by danShumway

HTML

<div class='container' >
    <canvas id='myCanvas' width='800px' height='400px'></canvas>
</div>

CSS

html, body {
    width:100%;
    height:100%;
}

.container {
    width:50%;
    height:50%;
    background-color:red;
}

#myCanvas {
    height:40%;
}

JavaScript

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

for(var i = 0; i < canvas.width; i++){
    for(var j = 0; j < canvas.height; j++){
        
        ctx.fillStyle= 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
        ctx.fillRect(i*8, j*8, 8, 8);
    }
}