HTML5キャンバスサークルクリック時

Question

最近私はHTML5キャンバスで遊んでいましたが、私がしたいことの1つはキャンバスで簡単なページを作成し、クリックするとどこにでも円を描くことです。私はそれが動作するはずのようないくつかのコードを持って、私はいくつかのコンソール出力でデバッグしようとしてきましたが、私は瞬間にエラーを見ることができませんでした。

私はCodepenを使用していますので、コンソールの機能が完全にどのように機能しているのかは不明ですが、残念ながら私のラップトップではデベロッパーコンソールをChromebookで使用できません。

誰かが見てみることができますか？私はここにコードを入れ、ペンへのリンクもドロップします。ありがとう！

HTML：

<canvas id="canvas" onclick="drawCircle(event)"></canvas> 

CSS：

canvas { 
    position: relative; 
    background: #f1c40f; 
    width: 100%; 
    height: 100%; 
} 

JS：

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

function drawCircle(e) { 
    var pos = getCursorPosition(c, e); 
    var clickX = pos.x; 
    var clickY = pos.y; 

    ctx.fillStyle = "#2980b9"; 
    ctx.beginPath(); 
    ctx.arc(clickX, clickY, 10, 0, 2 * Math.PI); 
    ctx.fill(); 

    console.log(clickX, clickY); 
    console.log("drawcircle"); 
} 

function getCursorPosition(canvas, e) { 
    // Gets click position 
    rect = canvas.getBoundingClientRect(); 

    console.log('getcursorpos'); 

    return { 
    x: e.clientX - rect.left, 
    y: e.clientY - rect.top 
    }; 
} 

Codepenリンク：https://codepen.io/wolverine1621/pen/gWvjgx

すべてのヘルプは高く評価されます。これはおそらくかなりシンプルなものですが、これは実際に初めてキャンバスを使って作業しているので、どんな情報も役立ちます！

ありがとうございます！

Answer 1

物事のカップル：

1）あなたは、あなたのキャンバスの幅と高さを設定していないので、そこに歪みになるだろうとのx/yの値は奇妙なことを行っています。解決方法：キャンバスの幅と高さをウィンドウの高さと幅に設定します

2）あなたのclickXとclickYを決定する方法は、あまりにも複雑です。ソリューション：あなたのコンテキストを取得した後event.clientXとevent.clientY

を使用し、幅と高さを設定します。

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

注：私はまた、CSS

に身体上のマージンを削除することをお勧めします

body { margin: 0 } 

（それはあなたが間違った値を与えているので）今、あなたはgetCursorPositionを取り除くことができ

var clickX = e.clientX 
var clickY = e.clientY 

Answer 2

キャンバスのwidthとheightをcssに設定しているため、問題が発生しています。

あなたはここではなく、そう...

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

のように、JavaScriptを使用して設定する必要があり、それはそれはサイズです維持するように、キャンバスを柔軟に使用する...

window.onresize = function() { 
    c.width = window.innerWidth; 
    c.height = window.innerHeight; 
} 

はworking codepen