html5 canvas is not showing full image

Question

My image size is 940 * 300 but html5 canvas showing only part of image in chrome. Can you please help how to fix this?

Below is the code

Answer 1

Two things:

• You were setting the context's size which doesn't make much sense. The canvas has a width and a height.

• You should really use img_buffer.onload to make sure you only paint the image when it's loaded and not before it's completely loaded.

Fiddle: http://jsfiddle.net/pimvdb/TpFQ8/

So:

and:

var cv  = document.getElementById('paint_area'),
    ctx = ctx.getContext('2d');

and:

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);
}