canvas drawimage draw zoomed image

问题

I need to set canvas size using code and than drawImage on this canvas. The problem is drawn image is zoomed.

code follows -

currentImageDIV = $("#cnv").css({ "position" : "relative" ,"height": 400, "width": 800,"top" :"100px" , "border": "1px solid red" });

var c = document.getElementById("cnv");
var ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false;

var img = new Image();
img.src = "/images/sample2.jpg";
img.onload = function () {
     ctx.drawImage(img, 0, 0); 
}

If I do not set the canvas size than image drawn as expected, not zoomed.

How can I control the canvas size without drawImage zoomed image ?

回答1:

I found out that if I hard code the width and height of the canvas tag than no zooming is taking place.

Another solution for this is to set the width and height using prop rather than css (e.g. $("#cnv").prop({"width": 800, "height": 600});)

来源：https://stackoverflow.com/questions/42944192/canvas-drawimage-draw-zoomed-image