HTML5画布调整大小和上下文坐标

Question

我试图画一个图像到我的画布。我已经在html中定义了我的画布，并使用JS来调整它的大小。当我使用的drawImage功能（图像的大小较大例如）

var can = document.getElementById('myCanvas'); 
can.style.width = (window.innerWidth-20) + "px"; 
can.style.height = "860px"; 
var context=can.getContext("2d"); 
var img=document.getElementById("boje"); 
context.drawImage(img,50,0,400,140); 

的位置和大小的属性不知何故坐标是不正确的调整大小后的画布。例如，如果我定义在HTML调整大小之前HTML的画布的尺寸，坐标是真正的HTML定义。

是否可以“重置”2d上下文以使用调整大小的画布的实际坐标？

谢谢。

Answer 1

你还没有使用JS调整它的大小，你已经使用CSS调整了它（style）。这只是像其他图像一样缩放。直接设置width和height属性：

can.width = (window.innerWidth-20); 
can.height = 860;