やりたいこと

canvas上でクリックした際、クリック位置のマウス座標を取得し、その座標にtextareaを出現させるようなことを実現したいです。

やってみたこと

テキストボックスの内容を取得し、canvas上のクリックした位置に取得した内容を表示させるというものを作ってみました
ちなみに以下のコードになります。

html
1<html>
2<head>
3<link rel="stylesheet" href="canvas.css" type="text/css">
4<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
5<script type="text/javascript" src="canvas.js"></script>
6</head>
7<p id="tool">
8<canvas id="axisCanvas" style="width: 700px; height: 800px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></canvas>
9Text: <input id="text" name="text" type="text" value="Example"> |
10  Size: <input id="size" name="size" type="text" size="3" value="14"> |
11  Color: <input id="color" name="color" type="text" size="7" value="#000">
12

JavaScript
1var canvas; // canvas要素(HTMLCanvasElement)
2var ctx; // 2Dコンテキスト(CanvasRenderingContext2D)
3var canvasW = 700; // canvas要素の横幅(px)
4var canvasH = 800; // canvas要素の縦幅(px)
5var mouseX; // 最後にクリックされた位置のx座標
6var mouseY; // 最後にクリックされた位置のy座標
7var text, size, color;
8window.onload = function() {
9  // canvas要素を取得し、サイズ設定
10  canvas = document.getElementById('axisCanvas');
11  canvas.width = canvasW;
12  canvas.height = canvasH;
13
14  // 描画のために2Dコンテキスト取得
15  ctx = canvas.getContext('2d');
16
17  // クリックイベントの登録
18  canvas.onclick = function(e) {
19    // 一度描画をクリア
20
21
22    // クリック位置の座標計算（canvasの左上を基準。-2ずつしているのはborderの分）
23    var rect = e.target.getBoundingClientRect();
24    mouseX = e.layerX;
25    mouseY = e.layerY;
26
27    // クリック位置を中心に円を描画
28    //ctx.beginPath();
29       //ctx.arc(mouseX/1.73, mouseY/1.95, 5, 0, Math.PI * 2, false);
30      // ctx.fill();
31    text = $('#text').val();
32    size = $('#size').val();
33    color = $('#color').val();
34
35    console.log(size);
36    console.log(mouseX + ","+mouseY);
37    console.log("Math.floor(rect.left)"+Math.floor(rect.left));
38    console.log("rect.left"+rect.left);
39    console.log("rect.top"+rect.top);
40    console.log("e.clientX"+e.clientX);
41    // 座標の表示テキストを描画
42    var maxWidth = 200;
43    ctx.textAlign = 'right';
44    ctx.font = size+"px 'ＭＳ ゴシック'";
45    ctx.fillStyle = color;
46
47    ctx.fillText(text, mouseX, mouseY);
48    //setTF(this.form.txtField1,'visible',5,100);
49
50  }
51
52};

ネット上で同じことをしようとしていると考えられる方のコードを利用してみましたがうまくいきませんでした。そのコードが以下のものになります。完全にお手上げ状態です。恐縮ですが詳しい方、何卒ご教授のほどお願い致します。

html
1<html>
2<head>
3<meta charset="UTF-8" />
4<title></title>
5
6<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
7<script src="http://code.highcharts.com/highcharts.js"></script>
8<script src="canvas.js"></script>
9</head>
10<body>
11	<canvas id="c" width="200" height="200"></canvas>
12
13</body>
14</html>
15

javascript
1var canvas = document.getElementById("c"),
2    textarea = null;
3
4canvas.addEventListener('onclick', function(e) {
5    if(!textarea) {
6        textarea = document.createElement('textarea');
7        textarea.className = 'info';
8        document.body.appendChild(textarea);
9    }
10    var x = e.clientX - canvas.offsetLeft,
11    y = e.clientY - canvas.offsetTop;
12    console.log("asasasasasasasasas"+x);
13    textarea.value = "x: " + x + " y: " + y;
14    textarea.style.top = e.clientY + 'px';
15    textarea.style.left = e.clientX + 'px';
16}, false);

回答1件

ベストアンサー

これでそれっぽく動いてるんですが違います？

html
1<html>
2<head>
3<meta charset="UTF-8" />
4<title></title>
5
6<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
7<script src="http://code.highcharts.com/highcharts.js"></script>
8</head>
9<body>
10    <canvas id="c" width="200" height="200"></canvas>
11
12</body>
13<script>
14var canvas = document.getElementById("c"),
15    textarea = null;
16
17canvas.addEventListener('click', function(e) {
18    if(!textarea) {
19        textarea = document.createElement('textarea');
20        textarea.className = 'info';
21        document.body.appendChild(textarea);
22    }
23    var x = e.clientX - canvas.offsetLeft,
24    y = e.clientY - canvas.offsetTop;
25    console.log("asasasasasasasasas"+x);
26    textarea.value = "x: " + x + " y: " + y;
27    textarea.style.position = 'absolute';
28    textarea.style.top = e.clientY + 'px';
29    textarea.style.left = e.clientX + 'px';
30}, false);
31</script>
32</html>