Холст html5 не показывает полное изображение

Размер моего изображения 940 * 300, но холст html5 показывает только часть изображения в хроме. Не могли бы вы помочь, как это исправить?

Ниже приведен код

<!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>
7
задан Mohammad Usman 3 October 2017 в 10:17
поделиться