CODEWITHSUNDEEP
htmlcanvashtml5-canvas
dharani
dharani

Reputation: 81

html5 canvas is not showing full image

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

<!DOCTYPE html>
<html>
    <head>
        <style></style>
    </head>
    <body onload="draw();">
        <p>Drag me</p>
        <canvas id="paint_area"></canvas>

        <script>
            function draw() {
                var ctx = document.getElementById('paint_area').getContext('2d');

                //ctx.fillStyle = '#cc3300';

                var img_buffer = document.createElement('img');
                img_buffer.src = 'http://www.jobcons.in/homebanner.jpg';
                var imgWidth = img_buffer.width;
                var imgHeight = img_buffer.height;
                ctx.width = imgWidth;
                ctx.height = imgHeight;
                ctx.drawImage(img_buffer,0,0,imgWidth,imgHeight);
            }
        </script>
    </body>
</html>

Upvotes: 8

Views: 8331

Answers (2)

pimvdb
pimvdb

Reputation: 154818

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:

<canvas id="paint_area" width="940" height="300"></canvas>

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

Upvotes: 10

Simon Sarris
Simon Sarris

Reputation: 63812

The reason is simply that you cannot do

  ctx.width= imgWidth;
  ctx.height=imgHeight;

You must do

  can.width= imgWidth;
  can.height=imgHeight;

Where can is a reference to the canvas, and not the canvas context.

Working example:

http://jsfiddle.net/rbNzb/

Upvotes: 6

Related Questions