javascript canvas stretches my Image

Question

    $.fn.imageCanvas = function() {

    if (!document.getElementById('bgCanvas')){
        $('body').append($('<canvas>',{id:'bgCanvas', width:'500px', height: '500px'}))
        var canvas = document.getElementById('bgCanvas');
        var ctx = canvas.getContext('2d');
    }
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img,0,0,438,300);
        console.log(this.width);
        console.log(this.height);
    }
    img.src= 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

In ctx.drawImage i wrote x,y,width,height. But canvas stretches this Image. How can I image with original width/height

1) `width` and `height` don't take a unit. They should just be `500`. 2) if you are also applying width/height via CSS, they can skew the canvas drawing. This should be avoided. — Shmiddty, Nov 06 '12 at 16:51

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

If you simply want to show the image without scaling, use the three-argument variant of drawImage with just x and y:

ctx.drawImage(img,0,0);

If you want to clip the bottom and right edge to your specified size, use the nine-argument variant:

ctx.drawImage(img,0,0,362,240,0,0,362,240);

The first four numbers set the x/y and width/height of the clipping rectangle, and the next four numbers set the x/y and width/height of the clipped image-rectangle that is drawn to the canvas.

EDIT:

The problem is that the jQuery function treats the width and height properties in the options object in the second argument as CSS properties, not as DOM object properties. If you inspect the HTML you generate, you'll find:

<canvas id="bgCanvas" style="width: 500px; height: 500px;"></canvas>

instead of what you want, which should be:

<canvas id="bgCanvas" width="500" height="500"></canvas>

See this question for a discussion about the problem. As a solution, I would suggest using instead:

$('body').append($('<canvas>',{id:"bgCanvas"}).attr({'width':500,'height':500}))

edited May 23 '17 at 12:16

Community

1
1

answered Nov 06 '12 at 16:44

apsillers

112,806
17
235
239

I alredy do that but Canvas strerches image again... :( – EarthUser Nov 06 '12 at 16:51
Does the simple three-argument version also scale your image? It absolutely should not. If it does, you may have a CSS problem with your canvas. Make sure you are not applying styles that affect the CSS width or height of the canvas. – apsillers Nov 06 '12 at 16:53
common.css is empty, in html i don't uses css – EarthUser Nov 06 '12 at 17:03
As it turns out, jQuery actually is setting CSS properties, contrary to what you'd expect. See [this question](http://stackoverflow.com/questions/10433046/creating-a-canvas-element-and-setting-its-width-and-height-attributes) for a discussion of the problem. I have edited my answer with a new solution. – apsillers Nov 06 '12 at 17:52

score 0 · Answer 2 · answered Nov 03 '16 at 11:27

0

Try using this library I recently created which can load an image, resize it fixed width & height or precentage and convert from or to base64 or blob.

https://github.com/vnbenny/canvawork.js

Hope this helps you!

answered Nov 03 '16 at 11:27

Ben Van Nimmen

3
1
4

javascript canvas stretches my Image

2 Answers2