Две вещи:
Вы устанавливали размер контекста, который не имеет особого смысла. canvas имеет ширину и высоту.
Вы действительно должны использовать img_buffer.onload
, чтобы убедиться, что вы рисуете изображение только тогда, когда оно загружено, а не до того, как оно полностьюзагружен.
Скрипка: http://jsfiddle.net/pimvdb/TpFQ8/
Итак:
<canvas id="paint_area" width="940" height="300"></canvas>
и:
var cv = document.getElementById('paint_area'),
ctx = ctx.getContext('2d');
и:
img_buffer.onload = function() {
var imgWidth = img_buffer.width;
var imgHeight = img_buffer.height;
cv.width = imgWidth;
cv.height = imgHeight;
ctx.drawImage(img_buffer, 0, 0, imgWidth, imgHeight);
}