HTML5のcanvasで表示される画像を複数のボタンによって切り替えたい

前提・実現したいこと

html5のcanvasについて、事前に用意してある複数のボタンのなかからどれかを押すことによって、対応した画像をcanvasで表示されるように切り替えたいです。

補足情報

アイコンジェネレーターのようなものを勉強に作ってみているのですが、全体的にうまく回っていません。
buttonタグで押されたものをcanvasのscriptの変数に対応したソースを代入できればと思っています。

m.ts10806

2019/08/15 00:00

試したこと調べたこと（現在のコード）をご提示ください。質問ではなく作業依頼になってしまっていますので、今の内容だと「そのように作りましょう」というアドバイスになります。

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

回答1件

ただbuttonで画像をcanvasで出すなら大して難しくありません。（私は質問文を「buttonで画像を選択したい！」と解釈しました。違いましたら、質問文を編集していただくか回答にコメントを送ってください。）

HTMl
1<form>
2  <button type=button onclick=hoge1(1)>150x150dayo</button>
3  <button type=button onclick=hoge1(2)>300x300dayo</button>
4  <button type=button onclick=hoge1(3)>450x450dayo</button>
5  <button type=button onclick=hoge1(4)>600x600dayo</button>
6</form>
7<canvas id="hoge2" width="400" height="400"></canvas>

JavaScript
1function hoge1(hoge3) {
2  var hoge3 = hoge3 - 1;
3  var hoge4 = ['//placehold.jp/150x150.png','//placehold.jp/300x300.png','//placehold.jp/450x450.png','//placehold.jp/600x600.png'];
4  var hoge5 = document.getElementById('hoge2');
5  var hoge6 = hoge5.getContext('2d');
6  var hoge7 = new Image();
7  hoge7.src = hoge4[hoge3];
8  hoge7.onload = function(){
9    hoge6.drawImage(hoge7, 0, 0, 400, 400);
10  }
11}