Canvasの基本的な原理は，「キャンバス」のメタファーに当てはまります。キャンバスは，ユーザーに表示するために線，形状，およびテキストを描画できる（長方形の）領域です。 <canvas>タグを使用してHTMLで表されます。

1. Canvasの紹介

学習のためのリソースキャンバスの使用法をここで詳しく説明することは不可能ですが，優れたリソースがあります。以下のいくつかをまとめました。

Mozilla Developer Network：Canvasチュートリアル–複数の言語で利用可能なキャンバスの優れた紹介 Mozilla Developer Network：Canvas API – canvas APIの包括的な概要

2.canvas.Screen

注意

canvas.Screen（）APIは完全に機能していますが，まだ完全に完成していません。バージョンアップに伴い詳細が変わる場合がありますので，あらかじめご了承ください。特に，変化する可能性が最も高いのはアニメーションの扱いです。これは，作者が使用した経験が少ないです。

class canvas.Screen（[options]）

canvas.Screen（）は，JavaScriptを介して描画するキャンバス要素を提供する実験のコンポーネントです。実行時に自動的にキャンバスをページに挿入し，サイズを調整して，含まれている要素をカバーします。 canvas.Screen（）のオプションを取ります。塗りつぶしを担当する関数であるrenderFunction，または汎用のレンダリング関数を使用して自動的にレンダリングされるcontentとしての形状の配列のいずれかが必要です。引数：options（オブジェクト）–オプション

canvas.Screen.options.renderFunction

render関数は，画面が表示されたときにキャンバスに描画するコードです。4つの引数で呼び出されます。 timestamp関数が呼び出された時点を表します。ページのロード以降の時間をミリ秒単位で測定した値を返します。 canvascanvas.Screen（）によって提供されるcanvasオブジェクトへの参照。 ctxキャンバス描画のコンテキストを提供します。これは，キャンバスに情報を配置するために使用されます。 obj現在キャンバスを描画しているcanvas.Screen（）への参照を提供。可能な限り単純なcanvas.Screen（）の例です。

// Define a simple render function
const renderFunction = function(ts, canvas, ctx, obj) {
  // The render function draws a simple text on the screen
  ctx.fillText(
    'Hello world', // Text to be shown
    canvas.width / 2, // x coordinate
    canvas.height / 2 // y coordinate
  )
}

// Define a canvas.Screen that uses the render function
const example_screen = new lab.canvas.Screen({
  renderFunction: renderFunction,
})

// Run the component
example_screen.run()

canvas.Screen.options.ctxType

描画モード：文字列，デフォルトは「2d」（前述のように，ctxパラメータを介して）render関数に渡されるキャンバスコンテキストのタイプ。デフォルトでは，コンテキストは2Dであり，おそらく実験で最も一般的に使用されます。3次元コンテンツや，3Dハードウェアアクセラレーションを使用して描画する場合は，さらに多くのタイプが利用可能です。

canvas.Screen.options.translateOrigin

座標系の原点を表示されているキャンバスの中心に移動します。ブール値，デフォルトはtrueです。このオプションは，viewportと組み合わせることで，画面サイズに対応した座標系を作成するのに役立ちます。 canvas.Screen.options.viewport キャンバスコンテンツのサイズ：配列，デフォルトは[800，600] キャンバスコンテンツのサイズを指定します（ピクセル単位の幅と高さのタプルとして）。これをviewportScaleと組み合わせて使用すると，特定のサイズで画面を設計し，参加者の画面のサイズに合わせて自動的に拡大縮小することも出来ます。

canvas.Screen.options.viewportScale

画面に合わせたビューポートをスケーリング： 'auto'（デフォルト），または数値のスケール係数。 'auto'に設定すると，キャンバスの座標系を変換して，キャンバスで覆われた可視領域に，ビューポートサイズに対応する（仮想）幅と高さが割り当てられるようにします。アスペクト比は維持されるため，ビューポート全体が常に表示されます（使用可能なスペースに応じて，上下または左右に空のスペースが追加される場合があります）。任意の数値の場合，キャンバス上のnピクセルがn * viewportScaleブラウザーのピクセル単位に対応するように座標系がスケーリングされます。

canvas.Screen.options.viewportEdge

ビューポートの境界を描画：ブール値，デフォルトはfalse