<canvas id="canvas" width="200" height="100"></canvas>
<script>
var img = new Image();
// This is a 2x1 image, blue at (0, 0) and green at (1, 0).
img.src = 'data:image/png;base64,' +
'iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAA' +
'CxMBAJqcGAAAAAd0SU1FB9wIGxQKIbPpHtMAAAAPSURBVAjXY2Bg+M/wnwEABgEB/6KPEdkAAAAASUVO' +
'RK5CYII=';

img.onload = function()
{
    // Start from the middle of the blue pixel and stretch to the entire
    // canvas. Canvas should have 1/3 blue on the left and 2/3 green on the
    // right, with gradient if interpolation allows.
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.drawImage(img, 0.5, 0, 1.5, 1, 0, 0, 200, 100);
}
</script>