When you reset the canvas size with CSS you are just "stretching" the pixels.
So to alter the number of pixels on the canvas you must set the canvas elements width & height.
Example code and a Demo: http://jsfiddle.net/m1erickson/G74zt/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
function start(){
var ratio=calculateProportionalAspectRatio(
img.width,img.height,canvas.width,canvas.height);
ctx.drawImage(img,0,0,img.width*ratio,img.height*ratio);
}
// Calculate the ratio that fills the canvas
// but doesn't stretch the image pixels
// (This may cause some pixels to be clipped)
function calculateProportionalAspectRatio(srcWidth, srcHeight, maxWidth, maxHeight) {
return(Math.min(maxWidth / srcWidth, maxHeight / srcHeight));
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Original Image</h4>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png">
<h4>Resize image proportionally to fill canvas</h4>
<canvas id="canvas" width=350 height=350></canvas>
</body>
</html>