HTML5 Canvas : redimensionnement et coordonnées contextuelles

Question

J'essaie de dessiner une image dans ma toile. J'ai défini mon canevas en html et je l'ai redimensionné à l'aide de 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);

D'une certaine manière, les coordonnées des propriétés position et taille ne sont pas vraies pour le canevas redimensionné lorsque j'utilise la fonction drawImage (la taille de l'image est plus grande par exemple). Si par exemple je définis les dimensions du canevas en html avant le redimensionnement JS, les coordonnées sont conformes à la définition html.

Est-il possible de "réinitialiser" le contexte 2D pour utiliser les coordonnées réelles de la toile redimensionnée ?

Nous vous remercions.

Answer 1

Vous ne l'avez pas redimensionné à l'aide de JS, vous l'avez redimensionné à l'aide de CSS ( style ). Il s'agit simplement d'une mise à l'échelle comme n'importe quelle autre image. Définir le width y height directement :

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