canvasの縮尺について

どなたかご教授願い致します

現在JavaScriptでテキストボックス内の文字列を読み込み、canvasを用いてcanvas内のクリックした位置に読み込んだテキストを表示させるようなものを作っております。
文字列を読み込み、canvasを用いてcanvas内のクリックした位置に読み込んだテキストを表示させることはできているのですが、canvasのサイズを大きくすると縮尺の違いからか、思った位置にテキストを表示させることができません。
悔むなく、以下のようにクリックされた位置のx座標、y座標を縮尺が合うように割っているのですが、これだと文字が少しぼやけてしまいます何かいい解決策はないでしょうか？お願いします

JavaScript
1ctx.fillText(text, mouseX/1.73, mouseY/1.95);

以下各全体ソースになります。

HTML
1<html>
2
3<head>
4  <meta charset="utf-8">
5  <title>canvasでクリックされた位置の座標を取得・表示する</title>
6  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
7  <script src="canvas.js"></script>
8  <link rel="stylesheet" href="canvas.css" />
9</head>
10
11<body>
12
13  <div id="axisCanvasRapper">
14    <canvas id="axisCanvas"style="width: 700px; height: 800px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></canvas>
15  </div>
16
17  Text: <input id="text" name="text" type="text" value="Example"> |
18  Size: <input id="size" name="size" type="text" size="3" value="14"> |
19  Color: <input id="color" name="color" type="text" size="7" value="#000">
20
21
22</body>
23
24</html>

JavaScript
1var canvas; // canvas要素(HTMLCanvasElement)
2var ctx; // 2Dコンテキスト(CanvasRenderingContext2D)
3var canvasW = 400; // canvas要素の横幅(px)
4var canvasH = 400; // 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.clientX - rect.left - 2;
25    mouseY = e.clientY - rect.top - 2;
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    ctx.fillText(text, mouseX/1.73, mouseY/1.95);
47
48  }
49
50};
51

CSS
1#axisCanvasRapper {
2  margin: 100px 200px 300px;
3
4
5}
6
7
8
9#axisCanvas {
10  border: 1px solid #CCC;
11}
12#tool {
13    margin: 60px 200px 100px;
14
15}
16#canvas {
17    margin: 10px 20px;
18    border: 2px dotted #DDD;
19}
20#clear {
21    margin: 10px 20px;
22}
23#music {
24      margin: 50px 200px 100px;
25}
26

行動規範の内容に同意します

回答3件

ベストアンサー

HTMLのcanvasサイズとJavaScriptのcanvasサイズに差異がありますね。それでズーム（拡大）されたようになったのだと思いますよ。下記でキレイに文字が出ました。

mouseX とmouseY の値のとり方を変更。
fillTextの微調整の計算式を削除

js
1var canvas; // canvas要素(HTMLCanvasElement)
2var ctx; // 2Dコンテキスト(CanvasRenderingContext2D)
3var canvasW = 400; // canvas要素の横幅(px)
4var canvasH = 400; // 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    ctx.fillText(text, mouseX, mouseY);
47
48  }
49
50};

JavaScriptで設定しているwidth,heightとstyleのwidth、heightを同一の値に変更

html
1<html>
2
3<head>
4  <meta charset="utf-8">
5  <title>canvasでクリックされた位置の座標を取得・表示する</title>
6  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
7  <script src="canvas.js"></script>
8  <link rel="stylesheet" href="canvas.css" />
9</head>
10
11<body>
12
13  <div id="axisCanvasRapper">
14    <canvas id="axisCanvas"style="width: 400px; height: 400px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></canvas>
15  </div>
16
17  Text: <input id="text" name="text" type="text" value="Example"> |
18  Size: <input id="size" name="size" type="text" size="3" value="14"> |
19  Color: <input id="color" name="color" type="text" size="7" value="#000">
20
21
22</body>
23
24</html>

投稿2018/07/18 08:16

mosapride

総合スコア1480

hiroakikoura

2018/07/18 08:33

迅速に回答していただきありがとうございます。鮮明に表示することができました！！本当にありがとうございました！

行動規範の内容に同意します

canvasのwidth/height属性とwidth/heightスタイルは混同してしまうのは仕方ないところですが、
それぞれ意味が違います。

canvasのwidth/height属性はコンテキスト(のビューポート？)のサイズを設定する属性となります。

js
1canvas.width = 400;
2canvas.height = 400;

canvasのwidth/heightスタイルが要素のサイズを設定します。

js
1canvas.style.width = '400px';
2canvas.style.height = '400px';

このコンテキストのサイズとスタイルのサイズを一致させればクリックした位置もずれることがなくなります。

js
1const w = 400;
2const h = 400;
3canvas.width = w;
4canvas.height = h;
5canvas.style.width = `${w}px`;
6canvas.style.height = `${h}px`;

投稿2018/07/18 08:20

turbgraphics200

総合スコア4269

canvasは、それ自体の描画エリアとしてのwidthとheightを持ちます。
質問者さんのサンプルの場合、(400,400)が描画エリアのサイズです。

HTMLエレメントとしてのcanvas要素は、スタイルシートによって、表示サイズを自由に変えることが出来ます。
今回のサンプルの場合、400x400の描画エリアを変倍させて(700,800)で画面に表示しろと言う指示です。

内部で持っている画像エリアのサイズが400,400なのに、それを700,800に拡大したら、1x1pixelの画素は1.75x2.0倍に拡大するので文字がぼやけるのは当然です。
負荷対策として、毎秒数枚レンダリングするような場合に、描画エリアは小さい方が負荷を抑えることが出来るのは事実です。消費メモリを抑えることも出来ます。
今回の場合、クリックイベントによる描画のみであるので、描画エリアを小さく抑える意味はそれほど無いのではないかと思います。

クリック座標をキャンバスのサイズと見た目のサイズの割合から算出するのは正しいアプローチです。
描画エリアを1000,1000にしてスタイルシートで700,800に縮尺させることもできると思いますが、いかがでしょう。

投稿2018/07/18 08:51