HTML+Javacript canvasにボタンクリックでfilterを適応させるには

前提・実現したいこと

ボタンクリックでグレイスケールにしたいんですができません
なぜでしょうか？

該当のソースコード

<html>
<body>

<canvas id="canvas"></canvas>
<input type="button" onclick="グレイスケール" onclick="ctx.filter='grayscale(100%)'">

</body>
<script>
    const canvas = document.getElementById("canvas");        
    let imagePath = "image.png";
    draw(canvas,imagePath);
    function draw(canvas,imagePath){
        console.log("draw");
        const image = new Image();
        image.addEventListener("load",function (){
            canvas.width = image.naturalWidth;
            canvas.height = image.naturalHeight;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0);
            console.log("load!");
        });
        image.src = imagePath;
    }
    </script>
</html>

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

回答1件

ベストアンサー

下記のコードで動くと思います。
4箇所、コメントを付けて直しています。

html
1
2<canvas id="canvas"></canvas>
3
4<!--(1)グレイスケールの属性をonclickからvalueに直す-->
5<!--(2)filterのあとにdrawImageの実行が必要-->
6<input type="button" value="グレイスケール" onclick="ctx.filter='grayscale(100%)';ctx.drawImage(image, 0, 0);">
7
8</body>
9<script>
10	const canvas = document.getElementById("canvas");
11	let imagePath = "image.png";
12	draw(canvas,imagePath);
13	function draw(canvas,imagePath){
14		console.log("draw");
15		window.image = new Image(); //(3)onclickからアクセスできるようグローバル変数にする
16		image.addEventListener("load",function (){
17			canvas.width = image.naturalWidth;
18			canvas.height = image.naturalHeight;
19			window.ctx = canvas.getContext("2d"); //(4)onclickからアクセスできるようグローバル変数にする
20			ctx.drawImage(image, 0, 0);
21		});
22		image.src = imagePath;
23	}
24</script>