キャンバス

Canvas コンストラクタは、 HTML5 の canvas 要素を新規に生成し、ウェブページに追加します。

これは p5.js の createCanvas 関数と似ていますが、いくつかの機能が追加されています！

キャンバスの幅を得るには canvas.w を、高さを得るには canvas.h を使います。 canvas.hw はキャンバスの幅の半分の値 (half width) を、 canvas.hh はキャンバスの高さの半分の値 (half height) を取得します。

new Canvas() に引数が渡されない場合、ウィンドウいっぱいにキャンバスが生成されます。

キャンバスのコンストラクタに、アスペクト比（縦横比）を渡すこともできます。これにより、与えられたアスペクト比を維持しながら、ウィンドウに収まる最大のキャンバスが生成されます。例えば、 new Canvas('2:1') は、横幅が縦幅の2倍のキャンバスを生成します。

もう 1 つの追加機能は、 "fullscreen" プリセットです。 new Canvas(1920, 1080, 'fullscreen') は、 1920x1080 の解像度を維持しつつ、ウィンドウに収まるようにキャンバスをレターボックス表示します。

ドット絵モード

Canvas のもう 1 つの機能は、 "pixelated" （ピクセル調／ドット絵）プリセットです。これを使うと、8 ビットや 16 ビット風のレトロゲームが作成できます！

このプリセットは、拡大倍率を指定しない限り、キャンバスを画面サイズに合わせて表示します。例えば、 "pixelated x2" は、指定された幅と高さの 2 倍の大きさで表示されるキャンバスを生成します。

ドット絵モードでは、スプライトの表示座標が整数でないと、ドットがぼやけて見えてしまいます。それを防ぐには、 allSprites.pixelPerfect を true に設定してすべてのスプライト座標を整数に揃え、カメラの座標とズーム値にも整数を使用すれば OK です。

ここで注意点をひとつ。最近のフォントは「アウトラインフォント」で、ドット絵モードでの見栄えがあまりよくありません。代わりに p5.js のloadFont関数で、「ビットマップフォント」をロードしてください。

キャンバスのリサイズ

resizeCanvas または canvas.resize 関数は、キャンバスの幅と高さを指定された値に変更します。

キャンバスの視覚的なサイズは、新しいサイズに拡大・縮小されます。スプライトの位置は変わりません。

カメラのフォーカスを同じエリアに合わせ続けたい場合は、この関数を呼び出した後、手動でカメラの位置を調整してください。