週刊ひろば③｜2026/2/11~2/17号

/* ———————————————————
A. 事前準備：主要な変数の定義（グローバルまたは上位スコープ）
——————————————————— */
let vCanvas = document.getElementById(‘mainCanvas’); // 画面に見えているキャンバス
let vCtx = vCanvas.getContext(‘2d’);

let recordCanvas = null; // 録画用の「隠しキャンバス」
let recordCtx = null;

let bgImage = new Image(); // ユーザーがアップロードした背景画像
let rect = { w: 0, h: 0 }; // プレビュー画面上での画像の表示サイズを格納する用

/* ———————————————————
B. 核心ロジック：① 録画用キャンバスの初期化
——————————————————— */
function setupRecordCanvas() {
// 画像の「生のサイズ(naturalWidth/Height)」でキャンバスを作成
recordCanvas = document.createElement(‘canvas’);
recordCanvas.width = bgImage.naturalWidth; // 例: 3840
recordCanvas.height = bgImage.naturalHeight; // 例: 2160
recordCtx = recordCanvas.getContext(‘2d’);
}

/* ———————————————————
C. 核心ロジック：② スケール（倍率）の計算
——————————————————— */
function getRecordScale() {
// 「本物の横幅」を「画面上の見かけの横幅」で割る
// rect.w は画面内でリサイズされた後の画像の幅
if (bgImage.width > 0 && rect.w > 0) {
return recordCanvas.width / rect.w;
}
return 1.0;
}

/* ———————————————————
D. 核心ロジック：③ 描画関数（すべての数値を scale で補正）
——————————————————— */
function renderFrame(ctx, cw, ch, scale = 1) {
// ユーザー設定値を取得し、すべてに scale を掛ける
const w = parseFloat(document.getElementById(‘widthInput’).value) * scale;
const h = parseFloat(document.getElementById(‘heightInput’).value) * scale;

// 座標のオフセット（中心からのズレ）もスケールさせる
const offsetX = parseFloat(document.getElementById(‘offXInput’).value) * scale;
const offsetY = parseFloat(document.getElementById(‘offYInput’).value) * scale;

// — ここで ctx に対して描画を行う —
// 例: ctx.fillRect(cw/2 + offsetX, ch/2 + offsetY, w, h);

//以下略…（この後、波形ごとの描画の条件分岐が続く）
}