Dessiner sur du canevas lorsque le clic de souris est désactivé

Question

Mon élément <canvas> prend 100vw et 100vh. Je veux pouvoir cliquer n'importe où et faire dessiner une image là-bas. En ce moment, quand je clique sur l'écran, l'image ne se dessine nulle part près de l'endroit où je clique. Plus je clique dans le coin supérieur gauche, plus c'est proche. Mais si je dévie légèrement du coin, l'image est poussée très loin vers le bas et vers la droite.

Comment puis-je calculer le décalage dont j'ai besoin pour que l'image dessine exactement où je clique?

//var count1 = (Math.floor(Math.random() * screen.width)) + 1; 
 
//var count2 = (Math.floor(Math.random() * screen.height)) + 1; 
 

 
function onCanvasClick() { 
 
    var image = document.getElementById("image"); 
 
    var xLoc = event.clientX; 
 
    var yLoc = event.clientY; 
 
    var loc = "xLoc is: " + xLoc + " | yLoc is: " + yLoc; 
 
    console.log(loc); 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    ctx.drawImage(image, xLoc, yLoc); 
 
}

#myCanvas { 
 
    width: 99vw; 
 
    height: 99vh; 
 
    border: 2px solid rgba(255, 255, 255, 0.5); 
 
    background-color: rgba(58, 154, 221, 0.3); 
 
} 
 

 
#image { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
}

<canvas id="myCanvas" onmousedown="onCanvasClick()">You dont support this!</canvas> 
 
<img id="image" src="//lorempixel.com/100/100/abstract/5/"></img>

Answer 1

Redimensionnement la toile avec CSS étend son contenu, semblable à un <img> se comporte.
Les décalages d'étirement des coordonnées de la toile par rapport à votre clic de souris.
Par exemple, un clic sur les coordonnées (5,5) pourrait se traduire par des coordonnées de toile étirée de (15,25).

Sizing the canvas
La taille affichée de la toile peut être modifiée en utilisant une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille de style . Si vos rendus semblent déformés, essayez d'indiquer explicitement les attributs de largeur et de hauteur dans les attributs, et sans utiliser de CSS.

Vous pouvez définir les dimensions du canevas via JavaScript afin de le remplir dans la fenêtre d'affichage.

var image = document.getElementById("image"); 
 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 

 
c.width = window.innerWidth; 
 
c.height = window.innerHeight; 
 

 
function onCanvasClick() { 
 
    var xLoc = event.clientX; 
 
    var yLoc = event.clientY; 
 
    ctx.drawImage(image, xLoc, yLoc); 
 
}

body { 
 
    margin: 0; 
 
} 
 
#myCanvas { 
 
    display: block; 
 
    background-color: rgba(58, 154, 221, 0.3); 
 
} 
 
#image { 
 
    display: none; 
 
}

<canvas id="myCanvas" onmousedown="onCanvasClick()" width="100%" height="100%">You dont support this!</canvas> 
 
<img id="image" src="//lorempixel.com/50/50/abstract/5/"></img>

Pour plus référence, voir:
HTML5 Canvas distorted?
Resize HTML5 canvas to fit window
HTML5 Canvas 100% Width Height of Viewport?

---

Redimensionnement effacera la toile, donc une conception adaptée nécessitera Functionalit supplémentaires y.
Matthew Crumley has ideas pour redessiner/mettre à l'échelle le contenu existant lors du redimensionnement.