You need to “step down” several times. Instead of scaling from a very large image to a very small, you need to re-scale it to intermediary sizes.
Consider an image you want to draw at 1/6 scale. You could do this:
var w = 1280;
var h = 853;
ctx.drawImage(img, 0, 0, w/6, h/6);
Or you could draw it to an in-memory canvas at 1/2 scale, then 1/2 scale again, then 1/2 scale again. The result is a 1/6 scale image, but we use three steps:
var can2 = document.createElement('canvas');
can2.width = w/2;
can2.height = w/2;
var ctx2 = can2.getContext('2d');
ctx2.drawImage(img, 0, 0, w/2, h/2);
ctx2.drawImage(can2, 0, 0, w/2, h/2, 0, 0, w/4, h/4);
ctx2.drawImage(can2, 0, 0, w/4, h/4, 0, 0, w/6, h/6);
Then you can draw that back to your original context:
ctx.drawImage(can2, 0, 0, w/6, h/6, 0, 200, w/6, h/6);
You can see the difference live, here:
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var img = new Image();
var w = 1280;
var h = 853;
img.onload = function() {
// step it down only once to 1/6 size:
ctx.drawImage(img, 0, 0, w/6, h/6);
// Step it down several times
var can2 = document.createElement('canvas');
can2.width = w/2;
can2.height = w/2;
var ctx2 = can2.getContext('2d');
// Draw it at 1/2 size 3 times (step down three times)
ctx2.drawImage(img, 0, 0, w/2, h/2);
ctx2.drawImage(can2, 0, 0, w/2, h/2, 0, 0, w/4, h/4);
ctx2.drawImage(can2, 0, 0, w/4, h/4, 0, 0, w/6, h/6);
ctx.drawImage(can2, 0, 0, w/6, h/6, 0, 200, w/6, h/6);
}
img.src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Equus_quagga_%28Namutoni%2C_2012%29.jpg/1280px-Equus_quagga_%28Namutoni%2C_2012%29.jpg"
canvas {
border: 1px solid gray;
}
<canvas id="canvas1" width="400" height="400"></canvas>
View same snippet on jsfiddle.