キャンバスにボタンを付ける(簡易版/JavaScript)

<-- メインキャンバス-->
<canvas id="canvas" width="895px" height="440px" style="position:absolute;background:red;"> </canvas>

<-- canvas Button1-->
<canvas id="canvas" width="100px" height="100px" style="z-index; position:absolute; left:900px; background: yellow;" onClick="ff();"> </canvas>

<-------JavaScript------------->
<script>
const canvas = document.getElementById('canvas'); //キャンバスの取得
const ctx = canvas.getContext('2d'); //キャンバスの属性を扱えるようにする

//オブジェクト1
ctx.fillStyle = 'green';
ctx.fillRect(20, 10, 150, 100);

//オブジェクト2
ctx.fillStyle = 'blue';
ctx.fillRect(320, 10, 150, 100);

//実行ボタン
function ff()
{
ctx.fillStyle = 'blue'; //青色を取得
ctx.fillRect(320, 250, 150, 100); //ボックスの作成
}
</script>

キャンバスにボタンを付ける(簡易版)
https://toshiaki1919.web.fc2.com/canvas_button_simple.html