HTML5 Canvas drawImage issue

StackOverflow https://stackoverflow.com//questions/24035348

Question

I am using a cropper.js library to get the cropping coordinates from the image and then i am creating a canvas to download the cropped image.

i have fixed cropping dimensions max at 200x200 pixels

The issue is that the cropped image does not stretch fully to 200 px width of the canvas that it should. See the image below

enter image description here

Check this fiddle (thanks @entio for the fiddle)

Below is the code

<body>
        <img src="Desert.jpg" id="image" style="float:left;"/>
        <canvas id="myCanvas" style="height:200px; width:200px; position:absolute; right:50px; top:20px; border:1px dotted black;"></canvas>
        <div>
        <label><em>y</em>coordinate</label>                                
        <input type="text" name="y" id="y-1" class="form-control" value="0" />

        <label><em>x</em> coordinate</label>                                
        <input type="text" name="x" id="x-1" class="form-control" value="0" />

        <label>Selected <em>width</em></label>                                
        <input type="text" name="width" id="width-1" class="form-control" value="0" />

        <label>Selected <em>height</em></label>                                
        <input type="text" name="width" id="height-1" class="form-control" value="0" />                                
     </div>                   

    </body>
    <script type="text/javascript">
        document.getElementById('image').onload = function() {
            new Cropper(image, {
                // options              
                max_width: 200,
                max_height: 200,                    
                update: function(coordinates) {
                    console.log(coordinates);
                    console.log(image);                     
                    for (var i in coordinates) {
                        document.getElementById(i + '-1').value = coordinates[i];
                    }
                    var canvas = document.getElementById('myCanvas');
                    var context = canvas.getContext('2d');                  
                    context.drawImage(image, coordinates['x'],coordinates['y'], coordinates['width'],coordinates['height'], 0, 0, 200, 200);
                }
            });
        }
    </script>

Any help ?

Was it helpful?

Solution

Canvas use width and height attributes.

<canvas id="myCanvas" width="200" height="200" style="height:200px; width:200px; posit...

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

'The width attribute defaults to 300, and the height attribute defaults to 150.' So it does not have the size you want unless you specify if.

FIDDLE: http://jsfiddle.net/RgGJh/2/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top