常連

現在chart.jsにてドーナツ型グラフを作成しています。  

[実装したものはこちらです](https://jsfiddle.net/xtL9fo25/3/)

[chart.jsのドキュメント](http://www.chartjs.org/docs/latest/)

現在、以下のようなコードを書いて、
ドーナツグラフを表示しております。 

今回やりたいことは、
ドーナツグラフの真ん中の穴の中央にタイトルを入れたいです。
例えば「制作実績円グラフ」のようなテキストを入れることは可能なのでしょうか。
できれば 制作実績<br>円グラフ のような改行を入れることも可能でしょうか。

わかるかたがいましたら教えていだだけないでしょうか。
よろしくお願いいたします。


```html
<div class="chart_price">
   <canvas id="chartPrice" width="300" height="300"></canvas>
</div>
```

```javascript

          //ドーナツグラフ
          var ctx = document.getElementById("chartPrice");
          var myPieChart = new Chart(ctx, {
            //グラフの種類
            type: 'doughnut',
            //データの設定
            data: {
                //データ項目のラベル
                labels: ["30万円以下", "30万～50万", "60万～90万", "100万～200万", "200万円以上"],
                //データセット
                datasets: [{
                    //背景色
                    backgroundColor: [
                        "#DA372B",
                        "#EAAF00",
                        "#3A9A4B",
                        "#3A7CEC",
                        "#8042FF"
                    ],
                    //背景色(ホバーしたとき)
                    hoverBackgroundColor: [
                        "#DA372B",
                        "#EAAF00",
                        "#3A9A4B",
                        "#3A7CEC",
                        "#8042FF"
                    ],
                    //グラフのデータ
                    data: [314, 80, 108, 79, 10]
                }]
            }
          });

```

chart.jsでドーナツ型グラフの中央にタイトルを載せたい

### 前提
**参考元**
[Moon Night Meteor Canvas Animation](https://www.youtube.com/watch?v=1pz-r5UzMu8&list=PL9uxHAkvBwk3nj7IZVVmxMuskRSIXNJ-B&index=16)

上記リンク先はCanvasを用いたアニメーション作成動画で、HTMLとJavaScriptを使用して、月と煌めく星と流れ星のアニメーションが表示されます。
動画ではDOMContentLoadedで制御されていますが、これをkeydownが発生すると流れ星のアニメーションが開始されるようなコードを構築しようとしています。（流れ星以外のアニメーションはページロード時に表示）
### 実現したいこと・要点
- キーボード押下一回につき、表示される流れ星は一つ。２回３回押せば２個３個表示される。
- 流れ星のアニメーションは、画面外上部から始まり、画面外下部へ消えて終了がワンループ。
- 生成された流れ星のスピードは、画面外へ消えるまで常に一定（生成時に決められたスピードの値が変化しないということ）
- 流れ星の発生位置、スピードともにランダム。

### 発生している問題・エラーメッセージ
- 連続したキーダウンに対応できていない。連続すると（恐らく）配列に次々と追加され、動作が重くなる。
- 流れ星のアニメーションが途中で終了してしまう。これにより、次のアニメーション開始位置が途中で終了した地点からとなり、望む動作になっていない。
### 該当のソースコード
```HTML,JavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Moon.css">
  </head>
  <body>
    <canvas id="canvas"></canvas>
    
    <script>
      let canvas, ctx, w, h, moon, meteor;
      let count = 0;
      let stars = [];
      let meteors = [];

      function init() {
        canvas = document.querySelector("#canvas");
        ctx = canvas.getContext("2d");
        resizeReset();
        moon = new Moon();
        for (let a = 0; a < w * h * 0.0001; a++) {
          stars.push(new Star());
        }
        // for (let b = 0; b < 7; b++) {
        //   meteors.push(new Meteor());
        // }
        StarAnimationLoop();
      }

      const countUp = () => {
        if (count < 80) {
          count++;
          console.log(count);
          drawMeteorScene();
          requestAnimationFrame(countUp);
        }
      }

      function keydown() {
        count = 0;
        meteor = new Meteor();
        meteors.push(meteor);
        countUp();
        // MeteorAnimationLoop();
        // if (meteor.y >= h + 50) {
        //   cancelAnimationFrame(MeteorAnimationLoop);
        // }
      }

      function resizeReset() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
      }

      function StarAnimationLoop() {
        ctx.clearRect(0, 0, w, h);
        drawStarScene();
        requestAnimationFrame(StarAnimationLoop);
      }

      function MeteorAnimationLoop() {
        drawMeteorScene();
        // requestAnimationFrame(MeteorAnimationLoop);
      }

      function drawStarScene() {
        moon.draw();
        stars.map((star) => {
          star.update();
          star.draw();
        })
      }

      function drawMeteorScene() {
        meteors.map((meteor) => {
          meteor.update();
          meteor.draw();
        })
      }

      class Moon {
        constructor() {
          this.x = 150;
          this.y = 150;
          this.size = 100;
        }
        draw() {
          ctx.save();
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.shadowColor = "rgba(254, 247, 144, .5)";
          ctx.shadowBlur = 50;
          ctx.fillStyle = "rgba(254,247,144, 1)";
          ctx.fill();
          ctx.closePath();
          ctx.restore();
        }
      }

      class Star {
        constructor() {
          this.x = Math.random() * w;
          this.y = Math.random() * h;
          this.size = Math.random() + 0.5;
          this.blinkChance = 0.05;
          this.alpha = 1;
          this.alphaChange = 0;
        }
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
          ctx.fill();
          ctx.closePath();
        }
        update(){
           if (this.alphaChange === 0 && Math.random() < this.blinkChance) {
            this.alphaChange = -1;
           } else if (this.alphaChange !== 0) {
            this.alpha += this.alphaChange * 0.5;
            if (this.alpha <= 0) {
              this.alphaChange = 1;
            } else if (this.alpha >= 1) {
              this.alphaChange = 0;
            }
           }
        }
      }

      class Meteor {
        constructor() {
          this.reset();
        }
        reset() {
          this.x = Math.random() * w;
          this.y = -100;
          this.size = Math.random() * 2 + 0.5;
          this.speed = (Math.random() + 1) * 5;
        }
        draw() {
          ctx.save();
          ctx.strokeStyle = "rgba(255, 255, 255, .1)";
          ctx.lineCap = "round";
          ctx.shadowColor = "rgba(255, 255, 255, 1)";
          ctx.shadowBlur = 10;
          for (let i = 0; i < 10; i++) {
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineWidth = this.seze;
            ctx.lineTo(this.x + 10 * (i + 1), this.y - 10 * (i + 1));
            ctx.stroke();
            ctx.closePath();
          }
          ctx.restore();
        }
        update() {
          this.x -= this.speed;
          this.y += this.speed;
          if ( this.y >= h + 50) {
            this.reset();
          }
        }
      }

      window.addEventListener("DOMContentLoaded", init);
      window.addEventListener("keydown", keydown);
      window.addEventListener("resize", resizeReset);
    </script>
  </body>
</html>
```
```css
body {
  padding: 0;
  margin: 0;
  height: 100vh;
  background: linear-gradient(0deg,rgba(13,35,93,1) 0%,rgba(0,5,8,1) 70%);/*グラディエーションの角度と色 */
}

#canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
```
### 試したこと
- keydown 関数内で countUp 関数を使用してキーダウンによるアニメーションの制御を試みましたが、連続したキーダウンに対応できず、アニメーションが重くなる問題が発生しています。
- 流れ星のアニメーション終了後の制御に関して、MeteorAnimationLoop などを試しましたが、適切なアプローチが見つかっていません。
### 補足情報
- 現在のコードは、ページロード時には月と煌めく星が表示され、キーダウンイベントが発生すると流れ星のアニメーションが開始されるが、問題点が発生しています。
- 連続したキーダウンに対応し、流れ星のアニメーションを滑らかに制御できるような方法を模索しています。
- 流れ星のアニメーションが途中で終了してしまい、次のアニメーション開始位置が望ましくないため、改善策を探しています。


JavaScriptで流れ星のアニメーションを適切に制御する。

### 実現したいこと
正確な座標にしたいが正確な位置よりずれてしまう

### 発生している問題・分からないこと
やっと上手くいったhtmlが作れましたが正確な位置を反映させたら斜め左上くらい座標が違うみたいです。正確な座標よりずれてしまいます。
元が正確な座標となると、画面からはみ出てしまう感じのズレになります。

Adobedwで見たら要素がずれてるみたいだったんですが、、、
何度か直したのですがわかりません。
多分要素のズレで正確な座標じゃなくなってるのです。
初期値にすれば治るんですかね？

ちなみに座標ステータスがわかるHTMLを制作しています。ズレ以外はうまくいきました

### エラーメッセージ
```error
例えば座標が(131,119)なはずが189px, 176pxの配置になってしまいます。
```

### 該当のソースコード

```打ち込んだソースコードがこれです。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画像の表示/ドラッグ</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-image: url(bk.png);  /* 背景画像指定 */
      overflow: hidden; /* スクロールを禁止 */
    }
    #image {
      width: 100px;
      height: 100px;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: move; /* ドラッグ可能なカーソル */
      max-width: 100%; /* 拡大を防止 */
      max-height: 100%; /* 拡大を防止 */
    }
    .status {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 1001; /* メニューより前面に表示 */
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
      color: white;
      font-family: monospace; /* 文字を等幅フォントにする */
    }
  </style>
</head>
<body>
  <input type="text" id="image-file-name">
  <div id="image"></div>
  <div class="status" id="status">座標: ( - , - )</div>
  <script>
    // 画像ファイル名を取得する関数
    function getFileName() {
      return document.getElementById("image-file-name").value;
    }
    // 画像を表示する関数
    function showImage(fileName) {
      const image = document.getElementById("image");
      image.style.backgroundImage = `url(${fileName})`;
      makeDraggable(image); // 画像をドラッグ可能にする
    }
    // 画像をドラッグして移動できるようにする関数
    function makeDraggable(element) {
      let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(element.id)) {
        // カーソルがクリックされたときにドラッグを開始する関数
        element.onmousedown = function(e) {
          e.preventDefault();
          pos3 = e.clientX;
          pos4 = e.clientY;
          document.onmouseup = closeDragElement;
          // カーソルが動いたときに要素を移動する関数を呼び出す
          document.onmousemove = function(e) {
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // 要素を移動
            element.style.top = (element.offsetTop - pos2) + "px";
            element.style.left = (element.offsetLeft - pos1) + "px";
            // ステータスを更新
            document.getElementById("status").innerText = `座標: (${element.style.left}, ${element.style.top})`;
          }
        };
      }
      // ドラッグを停止する関数
      function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }

    // 画像を表示するための処理
    const fileNameInput = document.getElementById("image-file-name");
    fileNameInput.addEventListener("change", function() {
      const fileName = getFileName();
      showImage(fileName);
    });
  </script>
</body>
</html>

```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
chatgptなどに聞いたら
オブジェクトの座標を左上からずらして、(57, 57)ではなく(56, 56)にするためには、JavaScriptのコードを修正する必要があります。具体的には、要素の初期位置の設定部分を調整します。
------------------------------------
誤差を修正するには、getCoordinates() 関数を修正する必要があります。

修正方法

以下の2つの方法のいずれかを選択できます。

1. getComputedStyle() 関数を使う

この方法は、transform プロパティを使って要素を中央に配置することで、誤差の影響を受けずに座標を取得できます。
---------------------------
などと言われるがままにソースをコピペしたり、色々したのですが座標の不具合だけは変わらずです💦

### 補足
特になし

座標が表示できるhtmlを作ったが座標の要素がずれてしまう

###概要
GUIプログラム関係で困っていることが有ります。助けてください。
画面の拡大と同時に伸縮率に合わせてテキストボックスとスクロールバーの大きさを変更したいです。
誰かご教授頂けませんか。

tkinterを利用して以下のコードを作りました。
```Python
import tkinter as tk

root = tk.Tk()
root.geometry("300x300")

canvas = tk.Canvas(root)
canvas.pack()

scrollbar = tk.Scrollbar(canvas)
scrollbar.pack(side=tk.RIGHT,fill="y")
text = tk.Text(canvas,width=10,height=10)
text.pack(side=tk.LEFT)
text["yscrollcommand"] = scrollbar.set

root.mainloop()
```

tkinter画面の伸縮と同時にTextboxの大きさを変更したい

### 実現したいこと
今、インボイス対応の領収書、請求書、納品書をwebで作るためのスクリプトを作っています。
細かい実装は後回しにしながらやっています。
今、困っているのが、PDFを発行すると、文字がぐちゃぐちゃになる状態を直したいのです。
canvasをコピーすればいいのかもしれないけど、その方法がわかりません。
私の目には、canvasを２つ、document.createElement("canvas")で作っているけど、実際に動いているcanvasは、１つだけみたいに見えます。
canvas2 = canvasで、コピーしているようで、コピーしきれていないのではないかと感じていますが、確実にわかっているわけではないので、確信は持てません。
直し方というか、原因がわかる方、よろしくおねがいします。
あと、ついでに、このアプリ（？）が使いやすいかどうかも教えてくれると幸いです。

### 発生している問題・分からないこと
文字がぐちゃぐちゃになる問題。
今、わからないのは、JavaScriptで書いている、canvasの画像のバックアップの取り方と、差し替えの仕方。
その他の細かいものは、ぐぐりながら考えます。



### 該当のソースコード

```PHP
ものすごく長いスクリプトなので、文字制限オーバーになるので、自分の都合がつくサーバーにうｐしました。
https://sizukasenkyo.com/apuri/tukurikake1.php
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
Lodashというライブラリを使って、_.cloneDeep(canvas)のようなことをやっても無駄だったこと。
関数内で、canvas２の挙動をいちいち宣言しないとエラーになること。
JavaScriptのエラーの原因が、Python以上にわかりにくくて、死ぬほど開発しづらいということ。

### 補足
jsPDFというライブラリを使っています。

PDFを再度発行すると数字がぐちゃぐちゃになる今のスクリプト

HTMLのフォームにファイルアップロード機能がありますが、canvasで描いたものを`form`の他の要素と一緒にPOSTで送信することはできないでしょうか。

調べてみると、「他の要素とは別にAjaxで送信する」「Data URIやBase64に変換してアップロードする」というような手法はあったのですが、できることならサーバ側に手を入れず、通常の`<input type="file" />`を受け取るのと同様に処理できればいいなと考えています。

Canvasの中身を、formとしてPOSTしたい

wordpressのサイト上でchart.jsを使ってレーダーチャートを作っているのですが、ラベルのフォントサイズ変更ができません。
チャートそのものは意図した表示になっています。
リファレンスやググってもみたのですが、詳しく書いてあるものがありませんでした。
```html
<div class="canvas_outer">
    <canvas id="myRadarChart1" width="400" height="400"></canvas>
</div>
<script>
    var ctx = document.getElementById("myRadarChart1").getContext('2d');
    var myRadarChart1 = new Chart(ctx, {
        type: 'radar',
        data: {
            labels: [
                'ラベル１',
                'ラベル２',
                'ラベル３',
                'ラベル４',
                'ラベル５'
            ],
            datasets: [{
                label: '',
                data: [
                    1,
                    2,
                    3,
                    4,
                    5
                ],
                backgroundColor: [
                    'rgba(124, 176, 191, 0.678)',
                ],
                borderColor: [
                    'rgba(124, 176, 191, 1)',
                ],
                borderWidth: 1
            }]
        },
        scaleLabel: {
            fontSize: 20
        },
        options: {
            legend: {
                display: false
            },
            scale: {
                ticks: {
                    fontSize: 0,
                    stepSize: 2,
                    max: 10,
                    beginAtZero: true,
                },
                gridLines: {
                    pointLabels: {
                        fontSize: 18
                    }
                }
            },
            scales: {
                yAxes: [{
                    display: false,
                    gridLines: {
                        drawBorder: false
                    }
                }],
                xAxes: [{
                    display: false,
                    gridLines: {
                        drawBorder: false
                    }
                }]
            }
        }
    });
</script>
```

詳しい方よろしくおねがいします。

chart.jsの(レーダーチャート)ラベルのフォントサイズ変更がしたい

現在プライベートでhtml5のCanvasを勉強しています。

そこで困っていることがあります。

結論から言うと、

複数のCanvasを結合し、１つの画像として保存するにはどうしたらいいでしょうか？

Canvasで描いた図形を画像に変換し、保存することはできました。

しかし、複数のCanvasタグを並べ、そこに描いた図形を結合し、それを1枚の画像として保存したいのです。

もしわかる方がいればよろしくお願いします。