マウスクリックによるキャンバス描画はオフです

Question

私の<canvas>要素は100vwと100vhです。私はそれのどこかをクリックしてそこに描かれた絵を持っていたいと思っています。今、画面をクリックすると、クリックした場所の近くに画像が描画されません。左上隅に近づくほど、近くになります。しかし、少しでもコーナーから外れてしまうと、イメージは本当に遠くまで右に押し出されます。

イメージをクリックする場所に正確に描画するために必要なオフセットを計算するにはどうすればよいですか？

//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

CSSとキャンバスのサイズを変更する方法<img>振る舞いに似て、その内容を伸ばします。
ストレッチは、キャ​​ンバス座標をマウスのクリックに相対的にオフセットします。
たとえば、座標（5,5）のクリックは、（15,25）の伸びキャンバス座標に変換できます。

Sizing the canvas
キャンバスの表示サイズは、スタイルシートを使用して 変更することができます。イメージはレンダリング中に スタイルに合うようにスケーリングされます。レンダリングが歪んでいるようなら、属性には の幅と高さの属性を明示的に指定し、CSSを使用しない場合は を指定してみてください。

キャンバス寸法をJavaScriptで設定すると、ビューポートに塗りつぶすことができます。

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>

複数の基準については、以下を参照してください
HTML5 Canvas distorted?
Resize HTML5 canvas to fit window
HTML5 Canvas 100% Width Height of Viewport?

---

サイズ変更がキャンバスをクリアしますので、応答性のデザインが追加functionalitが必要になりますy。
Matthew Crumley has ideasサイズ変更時に既存のコンテンツを再描画/スケーリングする場合。