HTML5 Изменение размера холста и контекстные координаты

Question

Я пытаюсь нарисовать изображение на своем холсте. Я определил свой холст в html и изменил его размер с помощью JS.

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); 

Какой-то координата положения и размера свойства не является истинными к измененному размеру холсту, когда я использовать функцию DrawImage (размер изображения больше, например). Если, например, я определяю размеры холста в html до изменения размера JS, координаты верны определению html.

Можно ли «сбросить» контекст 2d для использования реальных координат измененного холста?

спасибо.

Answer 1

Вы не изменили размер его с помощью JS, вы изменили его размер с помощью CSS (style). Это просто масштабирует его, как и любое другое изображение. Задайте width и свойства:

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