常連

###概要
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の大きさを変更したい

### 前提
**参考元**
[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で流れ星のアニメーションを適切に制御する。

### 実現したいこと

jsでペイントツールを作っています。そこでレイヤーを大量に作りたいと思ったのですが、Canvasデータのまま各レイヤーを管理していくとメモリが大量に圧迫されてしまいます。
現在描画中のレイヤー以外は必ずしもCanvas形式で保持しておく必要がないので、もっとよい形式があるのではないかと考えています。

### 処理負荷について

Canvasをなんらかの別のデータ形式に変換するときの負荷はなるべく軽くしたいです。
逆に、描画負荷はある程度無視できます。

### 補足

作成中のペイントツールはただパスを引くだけでなく、「消しゴム機能」や「マスク機能」「範囲選択して移動する機能」を含んでいます。そのため、SVG形式でデータ扱うことは実現難易度が高くなりすぎるという理由から、できればピクセルデータで管理したいです。

Web上で沢山の画像を扱うとき、メモリと処理負荷を意識したうえで最適なデータ形式ってなんでしょうか？

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

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

### 実現したいこと

- canvasでトップビューとアイソメトリックビュー（クオータービュー）のグリッドマップを表示する。
- トップビューのマーカーのx, y座標を座標変換してアイソメトリック座標へマッピングしたい
- アイソメトリック上でも移動可能範囲の判定を行いエリアから出ないようにしたい
- トップ、アイソメトリック共に向かって左右に移動した際は対応した向きに変えたい（左右の2パターンのみで良い）

### 前提

Javascript, Vue, html, cssでwebコンテンツを作っています。
ただ、ゲーム関連の専門知識はありません。
アイソメ図の一枚絵の背景がありその特定の絵柄の範囲内のみDOMが移動可能。
タイルマップデータ（タイル素材、タイルマップエディタの書き出しデータ）はありません。

### 発生している問題

[参考コード](https://jsfiddle.net/juwalbose/w1tnu9qc)を元にトップビューとアイソメトリックビュー間の座標変換とマッピングを実装してみましたが、
移動方向の連動まではできているのですが、座標のオフセット処理がわからず座標がずれてしまっています。
**borderOffset**の設定が原因と思われますが、
ここをアイソメトリックビューのグリッド開始座標で設定してみましたがこの値の求め方が間違っていそうなので
どのようにこの値を求めたらいいか、もしくは別の間違いがあるのか知りたいです。

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

[動作確認用デモ](https://codepen.io/merrymistake/pen/gOyZwEz)

```javascript
        /**
         * アイテムをアイソメトリック座標に描画
         */
        drawHeroIso() {
          let isoPt = { x: 0, y: 0 };
          let heroCornerPt = {
            x: this.marker.x,
            y: this.marker.y
          };
          console.dir(heroCornerPt);
          // 2Dマップからアイソメトリック座標を見つける
          isoPt = this.cartesianToIsometric(heroCornerPt.x, heroCornerPt.y);
          console.dir(isoPt);
          
          let heroWidth = 10;
          let heroHeight = 10;
          // こちらの値に何を設定すべきか、その求め方が理解できていない 
          let borderOffset = {
            x: this.area.x,
            y: this.area.y
          };
          this.testTarget.x = isoPt.x + borderOffset.x + heroWidth;
          this.testTarget.y = isoPt.y + borderOffset.y - heroHeight;
          console.dir(this.testTarget);
        },

        /**
         * デカルト座標からアイソメトリック座標に変換
         * 参考：https://jsfiddle.net/juwalbose/w1tnu9qc
         * @param {int} cartX デカルト座標 X
         * @param {int} cartY デカルト座標 Y
         */
        cartesianToIsometric(cartX, cartY) {
            console.dir(`cartX: ${cartX}, cartY: ${cartY}`);
            let tempPoint = { x: 0, y: 0 };
            tempPoint.x = cartX - cartY;
            tempPoint.y = (cartX + cartY) / 2;
            console.dir(`iso_x: ${tempPoint.x}, iso_y: ${tempPoint.y}`);
            return tempPoint;
        },
```

### 試したこと

[参考コード](https://jsfiddle.net/juwalbose/w1tnu9qc)の設定を見るとアイソメトリックビューの開始地点を設定しているように見えたのでarea.x, area.yを設定してみましたがそれでずれが生じていました。
どのようにこの値を求めたらいいか、もしくは別の間違いがあるのか知りたいです。


### 補足情報（FW/ツールのバージョンなど）
まだ調整が必要ですがcartesianToIsometricに渡す座標をミニマップ内での座標にしたら理想に近くなりました
[https://codepen.io/merrymistake/pen/PogVOWM](https://codepen.io/merrymistake/pen/PogVOWM)


トップビューのマーカーのx, y座標を座標変換してアイソメトリック座標へマッピングしたい

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

複数のCanvasを結合し、1つの画像として保存したい

現在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でドーナツ型グラフの中央にタイトルを載せたい

### やりたいこと

MVVM下で、WPF & C# を使って、Canvas コントロールの子要素を動的に増減させたいです。
[こちら](https://social.msdn.microsoft.com/Forums/ja-JP/8b2463e4-5679-4fc4-a691-360c288deaea/12304mvvm12305wpf12398canvas12467125311248812525125401252312398childre?forum=csharpgeneralja)にある質問と同様の質問になりますが、子要素は (そちらの質問がやっているような) Rectangle だけでなく、Canvas の子要素にすることができる全てのコントロールを対象として増減させたいです。

### 質問
このようなことが可能であれば、やり方を教えてください。
ViewModel にバインドする方法で出来なければ、Canvas.Children.Add でやりますので、可能でない場合は、可能でない、と教えていただけるだけで大丈夫です。

### 自分のレベル
C, C++, JavaScript は10年ほど
C# は3ヵ月ほど
.NET Core 3.1 & WPFは、1日経った程度です。
よって、C#は大体分かりますが、WPFはまだあまりよく分かっていません。
最低限、[MSDocsのWPF入門](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/windows/?view=netdesktop-5.0)は一通り見ており、基礎的なウィンドウ程度は作れます。
Binding, DataContext を使った View-ViewModel 間のデータバインドの方法も、単純なものなら理解しています。