var canvas = document.getElementById("canvas");
var cw = canvas.width;
var ch = canvas.height;
var $canvas = $('#canvas');
var $container = $('#container');
var $containerWidth = $('#containerWidth');
var $containerHeight = $('#containerHeight');
$containerWidth.val($container.css('width'));
$containerHeight.val($container.css('height'));
scale();
$('#containerWidth,#containerHeight').change(function() {
scale();
});
function scale() {
var containerW = $containerWidth.val();
var containerH = $containerHeight.val();
var scale = scalePreserveAspectRatio(cw, ch, containerW, containerH)
$container.css('width', containerW);
$container.css('height', containerH);
$canvas.css('width', cw * scale);
$canvas.css('height', ch * scale);
if (Math.abs(containerW - cw * scale) < 2) {
$canvas.css('top', parseInt((containerH - ch * scale) / 2));
$canvas.css('left', 0);
} else {
$canvas.css('top', 0);
$canvas.css('left', parseInt((containerW - cw * scale) / 2));
}
}
function scalePreserveAspectRatio(canvasW, canvasH, maxW, maxH) {
return (Math.min((maxW / canvasW), (maxH / canvasH)));
}
body {
background-color: ivory;
}
#container {
border: 1px solid blue;
width: 350px;
height: 200px;
position: relative;
}
#canvas {
border: 1px solid red;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Container=blue, Canvas=red</h4>
Width: 
<input type=range id=containerWidth min=100 max=500 value=350>
<br>Height: 
<input type=range id=containerHeight min=100 max=300 value=200>
<div id=container>
<canvas id="canvas" width=300 height=150></canvas>
</div>
