Html5: Why image draw on canvas not the right size

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

  •  21-12-2019
  •  | 
  •  

Question

I have problem drawing an image to a canvas with the right size.

This is my simple code: 

        var canvas = document.getElementById('canvas'); 
        var context = canvas.getContext('2d');

        $(canvas).css('width', '100px');
        $(canvas).css('height', '75px');


        context.drawImage(img, 0, 0, 100, 75);

I would expect the image draw on canvas to be 100 width and 75 height. The outcome is not that size but rather smaller size

like this: enter image description here

Expected the flower on the top corner fill up the whole red area. Does anyone know the reason?

Was it helpful?

Solution

When you reset the canvas size with CSS you are just "stretching" the pixels.

So to alter the number of pixels on the canvas you must set the canvas elements width & height.

Example code and a Demo: http://jsfiddle.net/m1erickson/G74zt/

enter image description here

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.crossOrigin="anonymous";
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
    function start(){

        var ratio=calculateProportionalAspectRatio(
            img.width,img.height,canvas.width,canvas.height);

        ctx.drawImage(img,0,0,img.width*ratio,img.height*ratio);

    }

    // Calculate the ratio that fills the canvas
    // but doesn't stretch the image pixels
    // (This may cause some pixels to be clipped)
    function calculateProportionalAspectRatio(srcWidth, srcHeight, maxWidth, maxHeight) {
        return(Math.min(maxWidth / srcWidth, maxHeight / srcHeight));
    }


}); // end $(function(){});
</script>
</head>
<body>
    <h4>Original Image</h4>
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png">
    <h4>Resize image proportionally to fill canvas</h4>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

OTHER TIPS

The image is already on the canvas when the javascript resizes it so the image inherits the new sizing. Try resizing the canvas to a fraction of some arbitrary starting values like this:

<img id="img" src="myimage.png">
<canvas id="canvas" height="750" width="1000">
<script>
var originalwidth=1000;
var originalheight=750;
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d');
var img=document.getElementById('img');
$(canvas).css('width', originalwidth/10);
$(canvas).css('height', originalheight/10);
context.drawImage(img,0,0,originalwidth,originalheight);
</script>

This assumes you cannot set the initial size of the canvas in the HTML, which would be preferable.

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