HTMLのinputから受け取ったカラーコードがcanvasの図形に反映されないです

前提

HTMLとjsをつかって図形の色を自由に変更して画像として保存できるWebアプリを作成しています
プログラミング初心者です

実現したいこと

ctx.fillRect(0, 0, 300, 300);の図形の色を< input type="color"> で選択した色に初期色(#515694)から変化させたいです。

発生している問題

HTMLからカラーコードをjsに持ってくることはできたがそれをcanvasで描いた図形の色に反映できません

該当のソースコード

HTML
1    <input type="color" value="#515694" id="color">

javascript
1const canvas = document.getElementById('canvas');
2const ctx = canvas.getContext('2d');
3//初期色
4let inputColor = '#515694';
5
6//カラーピッカーの色を反映
7color.addEventListener('change',function(){
8	inputColor = document.getElementById('color').value
9});
10ctx.fillStyle = 'inputColor';
11ctx.fillRect(0, 0, 300, 300);

試したこと

console.logでjs側にカラーコードが受け取られてるのは確認しました

hoshi-takanori

2022/11/19 06:24

イベントハンドラでは inputColor という変数の値を変更してるだけで、それを使って描画してないように見えますけど…。

int32_t

2022/11/19 06:29

欲しい挙動をもっと具体的に説明してください。「<input type=color> で色を選ぶとその後の描画はその色を使う」とか「<input type=color> で色を選ぶと既に描いたものも色が変わる」とか.

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

回答1件

ベストアンサー

図形の色を< input type="color"> で選択した色に初期色(#515694)から変化させたいです。

ご質問の内容からやりたいことを推測してみたのですがこういうことでしょうか？
違ってたらすみません。

実行結果
初期状態
 色変更後

html
1<!DOCTYPE html>
2<html lang="jp">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>QA</title>
9</head>
10<canvas id="can"> </canvas>
11
12<body>
13
14    <label>色設定： <input type="color" value="#515694" id="color"></label>
15    <script>
16
17        //キャンバス
18        const can = document.getElementById('can');
19        const con = can.getContext('2d');
20
21        //初期色
22        let inputColor = '#515694';
23        function main() {
24
25            //カラーピッカーの色を反映
26            color.addEventListener('change', function () {
27                inputColor = document.getElementById('color').value
28                main();
29            });
30
31            //図形クリア
32            con.clearRect(0, 0, 500, 500);
33
34            //図形描画
35            con.fillStyle = inputColor;
36            con.fillRect(0, 0, 300, 300);
37
38            //カラーコード描画
39            con.font = "20px'MS　ゴシック'";
40            con.lineWidth = 4;
41            con.fillStyle = "black";
42            con.fillText("inputColor", 20, 40);
43            con.fillText(inputColor, 20, 60);
44        }
45        // //ループ
46        // setInterval(main, 1000 / 60);
47        main();
48    </script>
49</body>
50
51</html>