Merge pull request #12 from shvyac/claude/practical-turing

fix: text not displaying on background image

Author: shvyac

QSL_card_designer.html

@@ -12,7 +12,7 @@
   .designer { background: #fff; flex: 1; position: relative; padding: 20px; border-radius: 8px; box-shadow: 1px 1px 4px #ddd; }
   .designer-area { position: relative; width: 500px; height: 320px; background: #eee; border: 2px dashed #bbb; border-radius: 8px; overflow: hidden; margin: 0 auto; }
   .designer-area.has-bg { width: auto; height: auto; min-height: 320px}
-  .bg-image-input { margin-bottom: 14px; 
+  .bg-image-input { margin-bottom: 14px; }
   #designerBg {position: absolute;top:0;left:0;width:100%;height:100%;z-index:0;object-fit:cover;}
   .field { position:absolute; min-width: 48px; min-height: 21px; background: transparent; border:1px solid #888; border-radius:4px; padding:0px; cursor:move; -webkit-user-select: none; user-select: none; box-sizing:border-box; overflow:visible; text-align:center; display:flex; align-items:center; justify-content:center;}
   .field-resize-handle { position:absolute; width:10px; height:10px; right:0; bottom:0; cursor:se-resize; background:rgba(0,0,0,0.3);}
@@ -640,47 +640,45 @@ <h2>QSL Card Designer (QSLカードデザイナー)</h2>
   }
 
   // フィールドを描画
-  if (adifRecords.length > 0) {
-    const rec = adifRecords[qsoIdx] || {};
-    designerFields.forEach((f) => {
-      const v = (rec[f.name] !== undefined ? rec[f.name] : "");
-      const w = f.width || 160;
-      const h = f.height || 16;
-      const x = f.x || 0;
-      const y = f.y || 0;
-
-      // フィールドの背景（透明なのでスキップ）
-      // テキストを描画
-      const fontSize = h * 1.0;
-      
-      // フォント設定（無線局コールサインと相手局の場合のみカスタムフォント）
-      let fontFamily = 'Arial, Meiryo, sans-serif';
-      if ((f.name === 'STATION_CALLSIGN' || f.name === 'CALL') && f.fontFamily) {
-        fontFamily = f.fontFamily;
-      }
-      ctx.font = `bold ${fontSize}px ${fontFamily}`;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      
-      // テキスト内容
-      let text = '';
-      if (f.showName !== false) {
-        text = `${f.displayName}: ${v}`;
-      } else {
-        text = v;
-      }
-      
-      // 色設定（無線局コールサインと相手局の場合のみカスタムカラー）
-      let textColor = '#000000';
-      if ((f.name === 'STATION_CALLSIGN' || f.name === 'CALL') && f.color) {
-        textColor = f.color;
-      }
-      
-      // テキストを描画
-      ctx.fillStyle = textColor;
-      ctx.fillText(text, x + w / 2, y + h / 2);
-    });
-  }
+  const rec = adifRecords[qsoIdx] || {};
+  designerFields.forEach((f) => {
+    const v = (rec[f.name] !== undefined ? rec[f.name] : "");
+    const w = f.width || 160;
+    const h = f.height || 16;
+    const x = f.x || 0;
+    const y = f.y || 0;
+
+    // フィールドの背景（透明なのでスキップ）
+    // テキストを描画
+    const fontSize = h * 1.0;
+
+    // フォント設定（無線局コールサインと相手局の場合のみカスタムフォント）
+    let fontFamily = 'Arial, Meiryo, sans-serif';
+    if ((f.name === 'STATION_CALLSIGN' || f.name === 'CALL') && f.fontFamily) {
+      fontFamily = f.fontFamily;
+    }
+    ctx.font = `bold ${fontSize}px ${fontFamily}`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // テキスト内容
+    let text = '';
+    if (f.showName !== false) {
+      text = `${f.displayName}: ${v}`;
+    } else {
+      text = v;
+    }
+
+    // 色設定（無線局コールサインと相手局の場合のみカスタムカラー）
+    let textColor = '#000000';
+    if ((f.name === 'STATION_CALLSIGN' || f.name === 'CALL') && f.color) {
+      textColor = f.color;
+    }
+
+    // テキストを描画
+    ctx.fillStyle = textColor;
+    ctx.fillText(text, x + w / 2, y + h / 2);
+  });
 
   // PNGとしてダウンロード
   canvas.toBlob(function(blob) {