常連

### 実現したいこと

openpyxlで読み込んだExcelファイルをTkinterのcanvasに表示する．
その際，セルごとに自動で改行するようにしたい．

### 前提

canvas.create_textを使って複数行のエクセルの中身を表示しようとするとすべて同じ座標に表示されて重なってしまいます．

### 発生している問題・エラーメッセージ
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-03-08/da4bcdf8-da60-4a74-a6ed-62ca5760f293.png)
このように文字が重なってしまいます．


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

```python
import tkinter
import openpyxl

class Application(tkinter.Tk):
    def __init__(self):
        super().__init__()

        # キャンバスのサイズ
        self.canvas_width = 850
        self.canvas_height = 490

        self.after_canvas = tkinter.Canvas(
            self,
            width=self.canvas_width,
            height=self.textcanvas_height,
            bg="white"
        )
        self.after_canvas.grid(row=2, column=1)
        yscroll = tkinter.Scrollbar(self, orient=tkinter.VERTICAL, command=self.after_canvas.yview)
        self.after_canvas["yscrollcommand"] = yscroll.set
        yscroll.grid(row=2, column=2, sticky=tkinter.N+tkinter.S)
               
        # ボタンを配置するフレームの作成と配置
        self.button_frame = tkinter.Frame()
        self.button_frame.grid(row=1, column=3)

        # ファイル読み込みボタンの作成と配置
        self.load_button = tkinter.Button(
            self.button_frame,
            text="load",
            command=self.push_load_button
        )
        self.load_button.pack(pady=10, ipady=10, ipadx=20)

    #以下openpyxlの処理
    def push_load_button(self): 
        wb = openpyxl.load_workbook('\test.xlsx')
        active_sheet = wb.active
        sheet_range = active_sheet['B2':'B4']

       # 範囲内のテキストを順次表示
        for row in sheet_range:
            for cell in row:
                cell_value = cell.value
                if cell.value is not None: # 改行できない
                    self.after_canvas.create_text(200, 30, text=cell.value + "\n", anchor="nw", fill="black", font=20)


app = Application()
app.mainloop()
```

### 試したこと

座標を固定してしまっていることは分かるのですがそれがいい感じに重ならないようにする方法が知りたいです．よろしくお願いいたします．





Tkinterのcanvas.create_textにて自動で改行したい

### 実現したいこと
Python初心者です。至らない点があると思いますが、ご教授いただければ幸いです。
tkinterのcanvas機能を使用して、新規作成したウインドウにテキストデータをインポート→配置→マウスによる移動ができるアプリを作りたいと考えております。(付箋アプリのようなものです)
このアプリに表示している内容はウインドウが閉じらた後やPCのシャットダウン後にも復元できる仕様にしたいと考えております。

保存/復元方法がわからず、そもそもできるのか？
という観点も含めてアドバイスを頂ければと考えております。

### 前提

canvas.create_text(200, 150, text="5/8　出張")
にて配置したtextの座標や表示内容（ここでは "5/8　出張")を保存し、
間違ってアプリを終了した際などに復元させたい。
※テキストの座標や表示内容は変化し、複数配置されるものとします

現状では、
canvas.create_text(200, 150, text="5/8　出張")
にて表示したtext=の中身"5/8　出張"を書き出す方法がわからないという状況です。
座標(200,150)は canvas.coords()で受け取ることができるので、
text=の中身"5/8　出張" を書き出す方法が存在するのか？そもそも不可能なのか…

私の知見が狭いため、上手く表現できないのですが、
canvas.xxxxxxx()の関数の戻り値としてtext=の中身 "5/8　出張" が受け取れる等の
機能があれば解決できそうなのですが…

Python tkinter canvas　テキスト情報の取得/保存/復元

ローカルの画像に特定の画像を重ねるページを作っています。
canvasを描画結果を画像に変換したいのですが、 toDataURL()をどのように用いれば良いでしょうか？

超初心者で恐縮ですが、よろしくお願いいたします。
```html
<div class="upload"><input type="file" name="file" id="file"></div>
<canvas id="canvas"></canvas>
```
```javascript
  var file = document.getElementById('file');
  var canvas = document.getElementById('canvas');
  var canvasWidth = 400;
  var canvasHeight = 400;
  var uploadImgSrc;

// Canvas
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.src = 'https://pigg.tokyo/images/test.png';
  img.onload = function() {
  ctx.drawImage(img, 0, 0);
}


function loadLocalImage(e) {
    var fileData = e.target.files[0];
    if(!fileData.type.match('image.*')) {
    alert('画像を選択してください');
    return;
  }

  var reader = new FileReader();
    reader.onload = function() {
    uploadImgSrc = reader.result;
    canvasDraw();
  }

  reader.readAsDataURL(fileData);
}

　file.addEventListener('change', loadLocalImage, false);

        
// 画像を表示
function canvasDraw(imgSrc) {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    var img = new Image();
    img.src = uploadImgSrc;
    img.onload = function() {
    ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width));
    addImage();
    preview();
  }
}
        
// 画像を重ねる
function addImage() {
        ctx.drawImage(img, 0, 0);
}
```


canvasの描画結果を画像に変換したい

### 実現したいこと
webglを描画するcanvasを背景にして、その上にpタグやdivタグで作った図形を設置したい。

### 前提
canvasにレンダリング？しているようなのでそのcanvasを、別に用意するテキストなどの下になるように重ねようと試みています。

### 発生している問題・エラーメッセージ

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

```html
<!DOCTYPE html>
<html lang="en">

<head>
    
    <script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
    <script>
        // ページの読み込みを待つ
        window.addEventListener('DOMContentLoaded', init);

        function init() {
            // サイズを指定
            const width = window.innerWidth;
            const height = window.innerHeight;

            // レンダラーを作成
            const canvasElement = document.querySelector('#myCanvas');
            const renderer = new THREE.WebGLRenderer({
                canvas: canvasElement,
            });
            // サイズを修正
            canvasElement.width = width;
            canvasElement.height = height;
            renderer.setSize(width, height);

            // シーンを作成
            const scene = new THREE.Scene();

            // カメラを作成
            const camera = new THREE.PerspectiveCamera(45, width / height);
            // カメラの初期座標を設定
            camera.position.set(0, 0, 1000);

            // カメラコントローラーを作成
            const controls = new THREE.OrbitControls(camera, canvasElement);

            // 形状とマテリアルからメッシュを作成します
            const mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), new THREE.MeshNormalMaterial());
            scene.add(mesh);

            tick();

            // 毎フレーム時に実行されるループイベントです
            function tick() {
                // レンダリング
                renderer.render(scene, camera);
                requestAnimationFrame(tick);
            }

            // myT canvasを取得
            const board = document.querySelector("#myT");
            const ctx = board.getContext("2d");
            // サイズを修正
            board.width = width;
            board.height = height;
            // 見やすくするため大きさと色を変更
            ctx.font = "48px serif";
            ctx.fillStyle = "Red";
            // 文字を追加
            ctx.fillText("Hello world", 500, 500);
        }
    </script>
    <style>
        #wrapper {
            position: relative;
        }

        #myT {
            position: absolute;
            top: 0;
            left: 0;
        }

        #myCanvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <title>Document</title>
</head>

<body>
    
    <div id="wrapper">
        <canvas id="myCanvas"></canvas>
        <canvas id="myT"></canvas>
    </div>
</body>

</html>
```

### 試したこと
https://qiita.com/TR246/items/4b84deadb26f1c450722
からcanvas同士でなら重ねられることを知り、はじめ<p>Hello World</p>とcanvasを重ねようとしていたのですがfillText()を用いて文字列を別のcanvasに移してみました。それらcanvasの大きさは同じになるように揃えたところ、重なる部分でオブジェクトの操作ができなくなりました。
そこでオブジェクトが描写されているcanvasにtextをfillText()で追加してみたのですが今度はtextが描写されなくなりました。
上記htmlのcss部分はこの記事を参考に書きました。

### 補足情報（FW/ツールのバージョンなど）
上記コードでid="myT"のcanvasをコメントアウトすると正常にオブジェクトを操作できます。(querySelector()でnullが返るため少し怒られますが動作に支障はないです)
vscodeの拡張機能であるliveserverを用いてローカルサーバーを立てて実行しています。

[HTML, canvas, webgl, three.js] webglを描画するcanvasを背景にしたい

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

### 目的と実現方法

JavaScriptのみで、dot言語をpng画像に変換し、HTML上に出力したいです。そのために「dot言語→SVG→canvas→png画像」の順で変換することにしました。

### 発生している問題

Viz.jsによって「dot言語→SVG」の変換はできています。しかし「SVG→canvas」の箇所で、画像が透明になって出力されてしまいます。
つまり、下記の"dotToSVGElement"関数は正常に動いていますが、"SVGElementToPng"関数で不具合が発生しています。
出力結果の画像は、ブラウザの開発者ツール(F12)にあるApplicationタブから、確認しています。使用ブラウザはChromeです。

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

```HTML
<body>
<img id="graph">
<script type="text/javascript" src="https://unpkg.com/viz.js@1.8.0"></script>
</body>
```

```JavaScript
const dot = `graph G {A--B; B--C;}`;

function dotToPng(dot) {
	const output = document.getElementById("graph");// img
	const svg = dotToSVGElement(dot);
	SVGElementToPng(output, svg);
	document.getElementById("svg").appendChild(svg);
	console.log(dot, svg);
}

function dotToSVGElement(dot) {
	const container = document.createElement("div");
	container.innerHTML = Viz(dot, {format: "svg"});
	return container.querySelector("svg");
}

function SVGElementToPng(output, svg) {
	const image = new Image();
	image.addEventListener("load", () => {
		const width = svg.getAttribute("width");
		const height = svg.getAttribute("height");
		const canvas = document.createElement("canvas");

		canvas.setAttribute("width", width);
		canvas.setAttribute("height", height);

		const context = canvas.getContext("2d");
		context.drawImage(image, 0, 0, width, height);

		const dataUrl = canvas.toDataURL("image/png");
		output.src = dataUrl;
	});
	
	const svgData = new XMLSerializer().serializeToString(svg);
	const svgDataBase64 = btoa(unescape(encodeURIComponent(svgData)));
	const svgDataUrl = `data:image/svg+xml;charset=utf-8;base64,${svgDataBase64}`;
	
	image.src = svgDataUrl;
}

dotToPng(dot);
```

### 知りたいこと
SVGをcanvasに変換したときに、透明にならないようにするためには、どのようにソースを変更すればよいのでしょうか？

### 参考にしたサイト
https://zenn.dev/tatsuyasusukida/articles/javascript-svg-png
https://qiita.com/basho/items/431af27b2fc6e90c9469

### 【追記】変数svgDataUrlのアドレス
```
data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNjJwdCIgaGVpZ2h0PSIxODhwdCIgdmlld0JveD0iMC4wMCAwLjAwIDYyLjAwIDE4OC4wMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnIGlkPSJncmFwaDAiIGNsYXNzPSJncmFwaCIgdHJhbnNmb3JtPSJzY2FsZSgxIDEpIHJvdGF0ZSgwKSB0cmFuc2xhdGUoNCAxODQpIj4KPHRpdGxlPkc8L3RpdGxlPgo8cG9seWdvbiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9InRyYW5zcGFyZW50IiBwb2ludHM9Ii00LDQgLTQsLTE4NCA1OCwtMTg0IDU4LDQgLTQsNCIvPgo8IS0tIEEgLS0+CjxnIGlkPSJub2RlMSIgY2xhc3M9Im5vZGUiPgo8dGl0bGU+QTwvdGl0bGU+Cjxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgcG9pbnRzPSI1NCwtMTgwIDAsLTE4MCAwLC0xNDQgNTQsLTE0NCA1NCwtMTgwIi8+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjI3IiB5PSItMTU3LjgiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0LjAwIiBmaWxsPSIjNjk2OTY5Ij5BPC90ZXh0Pgo8L2c+CjwhLS0gQiAtLT4KPGcgaWQ9Im5vZGUyIiBjbGFzcz0ibm9kZSI+Cjx0aXRsZT5CPC90aXRsZT4KPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjk2OTY5IiBwb2ludHM9IjU0LC0xMDggMCwtMTA4IDAsLTcyIDU0LC03MiA1NCwtMTA4Ii8+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjI3IiB5PSItODUuOCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQuMDAiIGZpbGw9IiM2OTY5NjkiPkI8L3RleHQ+CjwvZz4KPCEtLSBBJiM0NTsmIzQ1O0IgLS0+CjxnIGlkPSJlZGdlMSIgY2xhc3M9ImVkZ2UiPgo8dGl0bGU+QS0tQjwvdGl0bGU+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgZD0iTTI3LC0xNDMuODMxNEMyNywtMTMzIDI3LC0xMTkuMjg3NiAyNywtMTA4LjQxMzMiLz4KPC9nPgo8IS0tIEMgLS0+CjxnIGlkPSJub2RlMyIgY2xhc3M9Im5vZGUiPgo8dGl0bGU+QzwvdGl0bGU+Cjxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgcG9pbnRzPSI1NCwtMzYgMCwtMzYgMCwwIDU0LDAgNTQsLTM2Ii8+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjI3IiB5PSItMTMuOCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQuMDAiIGZpbGw9IiM2OTY5NjkiPkM8L3RleHQ+CjwvZz4KPCEtLSBCJiM0NTsmIzQ1O0MgLS0+CjxnIGlkPSJlZGdlMiIgY2xhc3M9ImVkZ2UiPgo8dGl0bGU+Qi0tQzwvdGl0bGU+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgZD0iTTI3LC03MS44MzE0QzI3LC02MSAyNywtNDcuMjg3NiAyNywtMzYuNDEzMyIvPgo8L2c+CjwvZz4KPC9zdmc+
```

【JavaScript】SVGをcanvasへ変換したときに画像が透明にならないようにしたい

### 前提
メジャーなブラウザで実行できるはずです

### 実現したいこと

マウスドラッグで動かせる2つの正方形があり(右クリック、左クリックそれぞれに実装)、
重なり合ったら、色が変わるようにしたい。

### 発生している問題・エラーメッセージ

38行目のe:undefined

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

```html
<html>
  <head>
      <meta charset="utf-8">
      <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
      </style>
  </head>
  <body>

    <canvas id="cvs" width="500" height="500"></canvas>

    <script>
      var cvs = document.getElementById("cvs");
      var ctx = cvs.getContext("2d");
      ctx.fillStyle = "rgb(255,255,255)"
      var side = 80;

      function Square(x,y){
        this.x = x;
        this.y = y;

        this.drawRect =  function(rgb) {
          ctx.fillStyle = rgb;
          ctx.fillRect(this.x,this.y,side,side);
        }

        this.move = (e) => {
          var rect = e.target.getBoundingClientRect();
          this.x = e.clientX - rect.left;
          this.y = e.clientY - rect.top;
          ctx.clearRect(0, 0, cvs.width, cvs.height);
          s1.drawRect("rgb(0,255,0)");
          s2.drawRect("rgb(255,0,0)");
        }

        this.getX = function(e) {
          var rect = e.target.getBoundingClientRect();
          this.x = e.clientX - rect.left;
          return this.x;
        }

        this.getY = function(e) {
          var rect = e.target.getBoundingClientRect();
          this.y = e.clientY - rect.top;
          return this.y;
        }

        this.double = function(me,a,b) {
          var me = this;
          var x1=me.getX();
          var y1=me.getY()+80;
          var x2=x1+80;
          var y2=me.getY();
          var x3=a;
          var y3=b+80;
          var x4=x3+80;
          var y4=b;
  
          if((Math.max(x1, x3) < Math.min(x2, x4)) & (Math.max(y1, y3) < Math.min(y2, y4))){
            ctx.fillStyle("rgb(0,0,255)")
            ctx.fillRect(Math.max(x1, x3),Math.max(y1, y3),Math.min(x2, x4),Math.min(y2, y4));
          }
          }
      }

      s1 = new Square(250,50);
      s2 = new Square(400,50);

      cvs.addEventListener('load',s1.drawRect("rgb(0,255,0)"));
      cvs.addEventListener('load',s2.drawRect("rgb(255,0,0)"));

      cvs.addEventListener('click', ()=> {
        cvs.addEventListener('mousemove',s1.move);
        cvs.addEventListener('mousemove',s1.getX());
        cvs.addEventListener('mousemove',s1.getY());
        cvs.addEventListener('mousemove',s1.double(s2.getX(),s2.getY()));
        s1.drawRect("rgb(0,255,0)");
      });
    
      cvs.oncontextmenu = function () {
        event.preventDefault();
        cvs.addEventListener('mousemove',s2.move);
        cvs.addEventListener('mousemove',s2.getX());
        cvs.addEventListener('mousemove',s2.getY());
        cvs.addEventListener('mousemove',s2.double(s1.getX(),s1.getY()));
        s2.drawRect("rgb(255,0,0)");
        return false;
      };

      cvs.addEventListener('mouseup',()=> {
        cvs.removeEventListener('mousemove',s1.move);
      });
      cvs.addEventListener('mouseup',()=> {
        cvs.removeEventListener('mousemove',s2.move);
      });
    </script>
  </body>
</html>
```

### 試したこと

canvasにおけるaddEventListenerで複数の関数を登録できることは調べて確認した。
関数の文法(?)に変な点がないかどうかも確認した。


イベントオブジェクトeがundefined

javascriptのエラーを解決できず、原因がわかれば教えていただきたいです。
下記サイトを真似して書いており、jsの最初の4行は別のサイトで調べたcanvasのサイズ指定の内容です。
このサイトのjsをそのままコピペして使っても、同じエラーになってしまうので、このサイトが違っているのか、他の部分で違っているのか分からず困っています。
https://tsuyopon.xyz/2018/09/14/how-to-create-drawing-app-part1/

何卒、よろしくお願いいたします。

```ここに言語を入力
【html】
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <h1>読み込みテスト</h1>
    <h1>お絵描きアプリ</h1>
    <div class="canvas_wrapper">
        <canvas id="canvas draw_area"></canvas>
    </div>
    <div><button id="clear_button"></button></div>
引用テキスト
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
    
</body>
</html>

```
```ここに言語を入力
【js】

//canvasのサイズ指定（canvasにはwidthとheightの属性が設置されていない）
var w = $('.canvas_wrapper').width();
var h = $('.canvas_wrapper').height();
//対象要素.attr(属性, (変更する値))
$('#canvas').attr('width', w);
$('#canvas').attr('height', h);



//①絵を描くために必要な情報の定義
window.addEventListener('load', function(){
    const canvas = document.getElementById('#draw_area');
    
    //描画機能を有効にする
    const context = canvas.getContext('2d');

    //直前のマウスのcanvas上のx座標とy座標を記録する
    const lastPosition = { x: null, y: null };//nullは「何もない」「値が存在しない」という意味

    //マウスがドラッグされているか（クリックされたままか）判断するためのフラグ
    let isDrag = false;//なぜtrueではない？


//②お絵描きアプリに必要な機能（関数）の定義を行なっている
    //絵を描く
    function draw(x, y){
        if(!isDrag){
            //マウスがドラッグされていなかったら処理を中断する
            return;//空のreturn文は、『undefined』を返す。関数ブロック内で処理を途中で終了したい時に使用する
        }

        //線の状態を定義する
        context.lineCap = 'round';//先端の形状を、丸いラインキャップにする。初期値はbutt(ラインキャップなし)
        context.lineJoin = 'round';//線の接合箇所を丸くする。初期値はmiter（面取りしない）
        context.lineWidth = 5;//線の太さ
        context.strokeStyle = 'black';//色。色・グラデーション・パターン値のいずれかを指定(初期値は#000)

        //書き初めは、lastPosition.x, lastPosition.yの値はnullとなっているため、クリックしたところを開始点としている（←！？）
        //lastPosition.xとlastPosition.yに現在のx,yを記録することで、次にマウスを動かした時に、前回の位置から現在の位置まで線を引くようになる（！？）
        if(lastPosition.x === null || lastPosition.y === null){
            //ドラッグ開始時の線の開始位置
            context.moveTo(x,y);
        } else{
            //ドラッグ中の線の開始位置
            context.moveTo(lastPosition.x, lastPosition.y);
        }
        //context.moveToで設定した位置から、context.lineToで設定した位置までの線を引く。
        // - 開始時はmoveToとlineToの値が同じであるため、ただの点となる。
        // - ドラッグ中はlastPosition変数で前回のマウス位置を記録しているため（！？）、前回の位置から現在の位置までの線（点のつながり）となる
        context.lineTo(x,y);

        //context.moveTo,context.lineToの値を元に実際に線を引く
        context.stroke();
    }    
});
```
