javascript - 選択ボックスを介して画像を更新するときにキャンバスに z-index を保持する方法

Question

次のように動作するポーカー テーブル メーカーを構築しています。

1. ページが読み込まれると、ポーカー テーブルのコンポーネントが 1 つずつ読み込まれます。
2. 最終ユーザーは、選択ボックスを使用して、ポーカー テーブルに必要なフェルト、アームレスト、ボディ、またはカップ ホルダーの種類を選択します。
3. 選択ボックスで変更が検出されると、Image オブジェクトの src 属性も変更されます。例: ユーザーが黒いフェルトを欲しがっている場合、次の画像を読み込みます:feels/black.png; 次に、青のほうが見栄えが良いと判断した場合、ページは画像をロードします。

私の問題は次のとおりです。

ポーカー テーブルの 1 つの要素を変更するとすぐに、新しい画像が残りの上に自動的に読み込まれます。

例: フェルトの色を変更すると、フェルトのイメージがアームレストのイメージの上に表示されます。

フェルト画像に z-index のようなものを強制的に維持させる方法を知りたいです。

これが私のコードです：

 var tableBody = new Image();
 tableBody.onload = function() {
  context.drawImage(tableBody, 0, 0);
 };

 tableBody.src = "http://www.mcptables.com/images/buildyourtable/body/autumn-oak.png";

 /* and it does the same thing for the other parts of the poker table... tableArmrest, tableFelt
    tableCupholders, etc... */

 $('#armrest').change(
function() {
    switch( $(this).val() ) {
        case "black":
                tableArmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/black.png";
        break;
        case "brown":
                tableArmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/wood.png";
    }
}
)

次のページで実際の動作を確認できます。

http://mcptables.com/buildyourtable.html

そして、これが私のJSコードへのリンクです:

http://mcptables.com/js/pokertablebuilder.js

どんな助けでも大歓迎です！変更したい場合