canvasの画像を保存したい

<!DOCTYPE html>
 <html>
 <head>
 <meta charset='utf-8'> 
<title>お絵描きツール</title> 
<style>
 body { background: #eee; }
 #canvas { margin: 10px; background:
 #ffffff; border: 1px solid #aaaaaa; } 
#canvas { margin: 10px; background: 
url(./picture/cat.png); background-size: 100% 100%; 
border: 1px solid #aaaaaa;
 border:solid 3px #000000;
 }
input[type="image"]{
padding: 2px;
outline: none;
}

input[type="image"].active{
background-color: #fff;
}

</style> 
</head>
 <body>
 <canvas id="canvas" width="1103" height="1190"></canvas><br>
 <label>色<input id="color" type="color"></label> 
<label>太さ<input id="width" type="number" min="1" max="15"></label> <input type="image" id="delete_canvas" src="./picture/clean.png" alt="クリア" width="45px" onClick="delete_canvas()"> 
<input type="image" id="pencil" src="./picture/pen.png" alt="鉛筆" width="45px" class="active" onClick="tool(1)">
 <input type="image" id="eraser" src="./picture/keshigomu.png" alt="消しゴム" width="45px" onClick="tool(2)"> 
<script type="text/javascript"> 
var drawing = false; // 前回の座標を記録する（初期値：０）
 var before_x = 0; 
var before_y = 0;
 var canvas = document.getElementById('canvas'); 
ctx = canvas.getContext('2d'); // canvas 全体に画像を配置 ここから+++ 
var canvasW = canvas.width; 
var canvasH = canvas.height;
 var photo = new Image(); 
// 画像オブジェクトを生成画像を canvas に表示 
photo.onload = function() {
 ctx.drawImage(photo, 0, 0, canvasW, canvasH); // 画像を canvas 全体に表示 
} photo.src = "./picture/kamiyuge.png"; // 画像ファイルの指定 */ canvas.addEventListener('mousemove', draw_canvas); // マウスをクリックしてる時 canvas.addEventListener('mousedown', function(e) {
 drawing = true; var rect = e.target.getBoundingClientRect(); 
before_x = e.clientX - rect.left; before_y = e.clientY - rect.top; }); 
// マウスをクリックしてない時 
canvas.addEventListener('mouseup', function() { drawing = false; }); canvas.addEventListener('touchstart', startPoint, false); canvas.addEventListener('touchmove', movePoint, false); canvas.addEventListener('touchend', endPoint, false);
// 描画の処理
 function draw_canvas(e) { // drawingがtrueじゃなかったら返す 
if (!drawing){ return }; 
var rect = e.target.getBoundingClientRect(); 
var x = e.clientX - rect.left; 
var y = e.clientY - rect.top; 
var w = document.getElementById('width').value; 
var color = document.getElementById('color').value; 
var r = parseInt(color.substring(1,3), 16); 
var g = parseInt(color.substring(3,5), 16); 
var b = parseInt(color.substring(5,7), 16); // 描画 
ctx.lineCap = 'round'; 
ctx.strokeStyle = 'rgb('+ r + ',' + g + ',' + b + ')'; 
ctx.lineWidth = w; 
ctx.beginPath(); 
ctx.moveTo(before_x, before_y); 
ctx.lineTo(x, y); 
ctx.stroke(); 
ctx.closePath(); 
// 描画最後の座標を前回の座標に代入する
 before_x = x; before_y = y; 
}
 // 色の変更 
$(".color a").click(function(){ 
cnvColor = $(this).data("color"); 
return false; 
}); 
// クリアボタンクリック時
 // クリアボタンクリックした時にアラートを表示
 function delete_canvas(){ r
et = confirm('canvasの内容を削除します。'); 
// アラートで「OK」を選んだ時 
if (ret == true){ 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
} } 
var pen = document.getElementById('pencil'); 
var era = document.getElementById('eraser');
 // 鉛筆と消しゴムの切り替え
 function tool(btnNum){ 
// クリックされボタンが鉛筆だったら 
if (btnNum == 1){ 
ctx.globalCompositeOperation = 'source-over';
 pen.className = 'active'; era.className = ''; 
}
 // クリックされボタンが消しゴムだったら 
else if (btnNum == 2){ 
ctx.globalCompositeOperation = 'destination-out'; 
pen.className = ''; 
era.className = 'active'; 
} }
 </script> 
</body>
 </html>

canvas、Javascript、HTMLを用いてお絵描きツールを作成しています。
現在、ペン、消しゴム、全消しの機能が実装できており、画像に書き込みが行えるところまでできています。
ネット上にあるサンプルコードを土台に、コードを加えているのですが、画像をcanvasに表示させると消しゴム、クリア機能が思ったように使えなかったので、画像をcanvasの背景にしました。すると、消しゴム、クリア機能はうまく使えるようになったのですが、今度は、canvasを右クリックし、画像で保存しようとした場合、描画した結果だけ背景透過のように保存されました。画像と一緒に保存できるようにしたいのですが、どうしたらよいでしょうか。
以下に現在できているところまでのコードを載せています。

y_waiwai

2022/11/03 06:14

このままではコードが読めないので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

m.ts10806

2022/11/03 09:09 編集

質問は編集できますので何度も投稿する必要はありません。＞以下に本文も見直し願います。

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

回答1件

署名用のライブラリsignature padが手軽でよろしいかと思います。
（ライセンスなどは確認してみてください）

javascript
1<style>
2.wrapper {
3  position: relative;
4  width: 400px;
5  height: 200px;
6  user-select: none;
7}
8
9.signature-pad {
10  position: absolute;
11  left: 0;
12  top: 0;
13  width:400px;
14  height:200px;
15}
16</style>
17<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.3/signature_pad.umd.min.js"></script>
18<script>
19window.addEventListener('DOMContentLoaded', ()=>{
20  const canvas = document.querySelector('#signature-pad');
21  const save=document.querySelector('#save');
22  const clear=document.querySelector('#clear');
23  const color=document.querySelector('#color');
24  const penWidth=document.querySelector('#penWidth');
25  const draw=document.querySelector('#draw');
26  const erase=document.querySelector('#erase');
27  window.addEventListener('resize', ()=>{
28    const ratio =  Math.max(window.devicePixelRatio || 1, 1);
29    canvas.width = canvas.offsetWidth * ratio;
30    canvas.height = canvas.offsetHeight * ratio;
31    canvas.getContext("2d").scale(ratio, ratio);
32  });
33  const signaturePad = new SignaturePad(canvas, {});
34  penWidth.addEventListener('change', ()=>{
35    signaturePad.maxWidth=penWidth.value;
36  });
37  clear.addEventListener('click', ()=>{
38    signaturePad.clear();
39  });
40  
41  color.addEventListener('change', ()=>{
42    signaturePad.penColor=color.value;
43  });
44  draw.addEventListener('click', ()=>{
45    const ctx = canvas.getContext('2d');
46    signaturePad.penColor=color.value;
47    ctx.globalCompositeOperation = 'source-over';
48    console.log(ctx);
49  });
50  
51  erase.addEventListener('click', ()=>{
52    const ctx = canvas.getContext('2d');
53    ctx.globalCompositeOperation = 'destination-out';
54  });
55  save.addEventListener('click', ()=>{
56    const a=Object.assign(document.createElement('a'),{'href':canvas.toDataURL("image/png"),download:"test.png"});
57    a.click();
58    a.remove();
59  });
60  let ce = new CustomEvent("HTMLEvents");
61  ce.initEvent('resize', true, true );
62  window.dispatchEvent(ce);
63  ce.initEvent('change', true, true );
64  color.dispatchEvent(ce);
65  penWidth.dispatchEvent(ce);
66});
67
68</script>
69<div class="wrapper">
70  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
71</div>
72
73<button id="save">save</button>
74<input type="color" id="color" value="black"></button>
75<button id="draw">Draw</button>
76<button id="erase">Erase</button>
77<input type="range" min="1" max="10" size="10" id="penWidth" value="3">
78<button id="clear">Clear</button>