html - キャンバスの問題で画像マスクを置き換える

Question

私は車のイメージを持っており、キャンバスの助けを借りてタイヤとメガネに効果を点滅させる必要があります。

そのために、キャンバス描画画像機能を使用しましたが、正常に動作していますが、問題は、タイヤタブにホバーするとタイヤが点滅し、ガラスタブにホバーするとメガネが点滅するはずですが、1回しか発生しません。

タイヤタブに最初にホバーすると、点滅機能を使用して点滅しますが、今回はマウスアウトしてガラスタブにホバーすると点滅効果がありますが、メガネではなくタイヤ（最初のホバータブ）で点滅します。両方に異なる機能を持っています。

オンラインで多くの回答を検索しましたが、それを達成できませんでした。私はすでに clearRect 関数を使用していますが、これで最初の画像が削除されていないと思います。

このコードで画像を作成しています：

context.clearRect(0, 0, canvas.width, canvas.height);                   
context.save();
context.drawImage(mask, 0, 0); //mask
context.fillStyle= ""; //fill color style
context.fillStyle= "#6600ee"; //fill color style
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = "destination-atop";
context.drawImage(shadow, 0, 0); //shadow
context.drawImage(glossreflection, 0, 0); //reflection                  
context.restore();

マウスアウトで削除してみてください

context.clearRect(0, 0, canvas.width, canvas.height);

すべてが機能しているというアラートも出しましたが、この問題について理解していません。