HTML5 Canvasプレイグラウンド

HTML5の <canvas> 2D APIを試すための、動くサンプルが読み込まれた状態で始まります。requestAnimationFrameのループ、サイズに合わせて変わるキャンバス、毎フレーム描かれる図形が入っています。色や速さ、描画の呼び出しを変えると、入力に合わせてアニメーションが再開します。ジェネラティブアートや簡単なゲーム、座標とループの学習に向いています。

使い方

1. HTML・CSS・JavaScriptを各タブに書きます。自動実行がオンなら入力を止めて少しすると結果が更新され、オフなら「実行」を押します。
2. console.log、warn、error、info、tableは結果の下のコンソールに表示されます。捕捉されないエラーには行番号が付き、タップするとその行へ移動します。
3. テンプレート（基本のページ、Canvasアニメーション、JavaScriptのコンソール例）から始めることもできます。
4. 共有リンク（コードはリンク自体に圧縮して入ります）をコピーするか、すべてを1つの.htmlファイルとしてダウンロードできます。

• 結果は同一オリジンのアクセス権がないサンドボックスのiframeで動くため、このサイトやCookie、ストレージは読めず、何も送信されません。
• コードはこのブラウザにだけ保存されます。共有リンクを開くとそのコードが読み込まれます。
• 共有リンクはコードを#以降に入れるのでサーバーには届きません。コードが長いとリンクも長くなり、アプリによっては切れることがあります。
• 完全なHTML文書を貼り付けた場合、CSSはそのhead内に、JavaScriptは</body>の直前に入ります。

こんなときに便利

プロジェクトに入れる前にCSSの小技を試す、不具合を数行で再現して同僚や掲示板で共有する、コンポーネントの試作、Webの基礎の学習、fetchでAPIを試す、といった用途に使えます。タブごとに言語が分かれ、入力を止めて少しすると結果が再読み込みされます。重い処理のときは自動実行をオフにして、好きなときに実行してください。

console.log・info・warn・error・console.tableは結果の下に表示されます。捕捉されなかったエラーや拒否されたPromiseは行番号付きで表示され、タップするとそのコードの行に移動します。

サンドボックスのしくみ

ページは同一オリジンへのアクセスを持たない、隔離されたiframeの中で動きます。そのためこのサイトのストレージやCookieは読めず、無限ループやクラッシュが起きてもプレビューにしか影響しません。コードからのネットワーク通信は普通のWebページと同じようにブラウザから送られますが、それ以外は何も送信されません。async/awaitやfetchを使った最近のJavaScriptも、通常のページと同じように動きます。

共有と保存

エディタは最後に書いたコードをこのブラウザに保存します。共有リンクは3つのタブの内容を圧縮してURLの # 以降に入れます。# 以降はブラウザがサーバーに送らない部分です。コードが長いとリンクも長くなり、チャットアプリによっては途中で切れることがあります。.htmlをダウンロードすれば、どのブラウザでも開ける単独のファイルとして残せます。

よくある質問