Canvasで描く「動的タイポグラフィ」と
ベクターレス・UIレンダリング

1. 解像度非依存を実現する「相対スケーリング」ロジック

ユーザーが投稿する写真は、正方形もあれば縦長もあります。どのようなサイズでも「プレイヤーが馴染む」ようにするため、すべてのパーツ（フォントサイズ、バーの太さ、影のボケ具合）をプレイヤー全体の width に対する比率で計算しています。

例えば、タイトルのフォントサイズを 6.5% に設定することで、4K写真でも低画質な写真でも、視覚的なバランスが崩れない「レスポンシブな画像合成」を実現しました。

// UIサイズに応じた動的なプロパティ算出
const uiWidth = player.width;
const titleFontSize = Math.floor(uiWidth * // 独自のフォント倍率);
const artistFontSize = Math.floor(uiWidth * // 独自のサブテキスト倍率);

// 影の深さもサイズに合わせて計算し、立体感を一定に保つ
ctx.shadowBlur = Math.max(MIN_BLUR, uiWidth * // 独自の影倍率);
ctx.shadowOffsetY = // 独自のオフセット計算;

// 描画位置の決定
ctx.font = `bold ${titleFontSize}px "Hiragino Kaku Gothic ProN", sans-serif`;
ctx.fillText(player.title, centerX, currentY);

2. 外部画像を使わない「ピュアCanvasパス描画」

再生・一時停止・スキップボタンといったUIパーツは、SVGやPNGといった画像アセットを一切使用していません。すべて roundRect や arc、lineTo といったCanvasの低レベルパス描画命令で生成しています。

これにより、画像素材の読み込み待ちが発生せず、ドラッグ移動時も高パフォーマンスに再描画（Re-render）が可能です。また、ベクターデータとして描画されるため、高解像度の書き出し時にもボタンが一切ボケないという大きなメリットがあります。

// 一時停止ボタンをCanvasパスで描画する例
const btnSize = uiWidth * // 独自のサイズ係数;
const pauseBarW = btnSize * // バーの幅係数;
const pauseBarH = btnSize * // バーの高さ係数;
const gap = btnSize * // 隙間の計算値;

ctx.beginPath();
// 2本の縦線を計算に基づいて描画
// ここにCanvasのroundRectを用いた描画処理が入ります
ctx.roundRect(x1, y, pauseBarW, pauseBarH, // 独自の角丸値);
ctx.roundRect(x2, y, pauseBarW, pauseBarH, // 独自の角丸値);
ctx.fill();

3. ユーザー体験（UX）を支える当たり判定アルゴリズム

Canvas上の図形はDOMではないため、標準のイベントリスナーでは「プレイヤーを掴む」ことができません。そのため、マウスやタッチの座標を取得し、プレイヤーのバウンディングボックス内に収まっているかを判定する「当たり判定」を独自実装しています。

操作性を高めるため、実際の表示領域よりもわずかに広い「判定用パディング」を設け、指での操作でもストレスなく位置調整ができるように工夫しています。

// ドラッグ開始時のヒット判定
function checkHit(pos) {
    const padding = player.width * // 独自の判定余裕値;
    const isInside = (
        pos.x >= player.left - padding &&
        pos.x <= player.right + padding &&
        pos.y >= player.top - padding &&
        pos.y <= player.bottom + padding
    );
    
    if (isInside) {
        // ここにドラッグ開始の状態管理処理が入ります
    }
}

Developer's Note

このツールを開発する際、最も大切にしたのは「情緒的な再現度」です。

2000年代のMP3プレイヤーのような、懐かしくも洗練されたUIを目指しました。単に図形を置くだけでは「貼り付けた感」が出てしまうため、UIの色に合わせて影（Shadow）の色温度や透過度を微調整しています。例えば、白いUIには暗めの影を、黒いUIには明るめの柔らかな光（Glow）を配置することで、どんな背景写真の上でもUIが浮き上がって見えるようにしました。

サーバーに画像を送らず、あなたのデバイスの中だけで完結するこのツールで、日常の何気ない写真を「あなただけの名盤」に変えて楽しんでいただければ幸いです。