CODEWITHSUNDEEP
javascripthtmlcanvas
coure2011
coure2011

Reputation: 42524

wrong image height in canvas

I have a canvas like this

<canvas id="canvas" width="600px" height="300px"></canvas>

Now I am trying to show image inside the canvas of some 260px width and height. But its showing the image full screened in canvas. What I am doing wrong?

img.onload = function(){
                var im = this;
                var imgWidth = im.width;
                var imgHeight = im.height;

                var imgScaledWidth = 0;
                var imgScaledHeight = 0;

                imgScaledHeight = self.conHeight - 40;
                imgScaledWidth = imgScaledHeight * (imgWidth/imgHeight);

                self.context.drawImage(this, 0,0,imgScaledWidth,imgScaledHeight);
            }

Its showing like this enter image description here

Upvotes: 0

Views: 236

Answers (2)

robertc
robertc

Reputation: 75777

There's no reason why your code shouldn't be working based on what you've shown in the question. Here is an example based on the code you've given with some minor changes to account for not having a self variable.

<script>
    var img = document.getElementById("image");
    var c = document.getElementById("canvas");
    var con = c.getContext("2d");

    img.onload = function(){
        var im = this;
        var imgWidth = im.width;
        var imgHeight = im.height;

        var imgScaledWidth = 0;
        var imgScaledHeight = 0;
        var off=20;            

        imgScaledHeight = c.height - off;
        imgScaledWidth = imgScaledHeight * (imgWidth/imgHeight);

    con.drawImage(this, 0,0+(off/2),imgScaledWidth,imgScaledHeight);
    }

</script>

Upvotes: 1

Alex Turpin
Alex Turpin

Reputation: 47776

You are stretching it. If you don't want to show the image stretched, just don't pass any size to drawImage:

self.context.drawImage(this, 0, 0);

Upvotes: 0

Related Questions