不正確な位置 - HTML＆JAVASCRIPT

Question

私は、コードに以下を示すように設定描画キャンバスとイムで絵を持っている：

<div class="two40"> 
    <img class = "hidden" src="lungs.PNG"width="100%" height="300" id="lungs"> 
    <canvas height="300px" style="background:transparent; width: 100%; height: 300" id="specialLung"></canvas> 
</div> 


function draw(){     
    var drawing = document.getElementById("specialLung"); 
    var con = drawing.getContext("2d"); 
    var image = document.getElementById("lungs"); 
    con.drawImage(image, 0, 0, drawing.offsetWidth, 300); 

} 

目標ここでは、中に円を描くようにありますマウスクリックの位置。マウスのクリック位置とは異なる位置に円が描かれているのは、左上のオフセットです。

divの下にキャンバスを配置した場合。 以下の構造を持つ

<div> 
    <div> 
    !!some code  
    <div> 
    <div> 
    !!Canvas and picture code 
    </div> 
<div> 

問題は何ですか？私は何が欠けている！起動するには、事前

Answer 1

で おかげで、あなたは300は300pxであることを、キャンバスのCSS heightのための無効な値を使用しています。

キャンバスバッファにピクセルを追加していないcssでキャンバスをストレッチしています。 ctx.fillRect(10, 10, 30, 30)を使ってキャンバス上に正方形を描くことでこれをテストすることができます。実際には四角形になります。あなたはこれに対抗するために何かをする必要があります。

私はあなたがcssでキャンバスを拡大縮小し、四角形を四角形にしたいとは思わなかったと仮定します。この時点で、

parentElement.addEventListener('resize', function(){ canvas.width = parentElement.getBoundingClientRect().width });

キャンバスの意志：その場合は、あなたが知っていることは、あなたが文字通りことを行うことができますので、あなたが、キャンバスの幅を親の幅と同じになりたいということです親の全幅が正しいピクセル縦横比であるが、JavaScriptの要素の変数を使用してキャンバスのwidthとheightを変更すると、リセットが発生するため、キャンバスのコンテンツが再描画されるという問題が発生する描画バッファのこれが何を意味するのか心配する必要はありませんが、あなたが目指しているのであれば、その内容を保持する方法を見つける必要があります。

かなり賢明な解決策は、resizeイベントリスナーでcanvas.widthを変更する前に、あなたがリサイズする前に、キャンバスの幅にvirtualCanvasの幅を設定し、単純に描き、その後

var virtualCanvas = document.createElement('canvas'), 
    virtualCtx = virtualCanvas.getContext('2d'); 
virtualCanvas.height = canvas.height; // or 300 

仮想キャンバスを作成することです現在のキャンバスを仮想キャンバスに保存します（virtualCtx.drawImage(canvas, 0, 0);）。アルファチャンネルに関する問題は発生しません.virtualCanvasの幅を変更すると、その中のすべてのものが削除されるためです。

この時点で、virtualCanvasの図面をcanvasにctx.drawImage(virtualCanvas, 0, 0);と読んでいただければ、あなたは黄金です！