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

前提

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

実現したいこと

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

発生している問題

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

該当のソースコード

HTML

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

javascript

const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');//初期色let inputColor = '#515694'; //カラーピッカーの色を反映color.addEventListener('change',function(){ inputColor = document.getElementById('color').value});ctx.fillStyle = 'inputColor';ctx.fillRect(0, 0, 300, 300);

試したこと

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