JavaScriptでキャンバスに描きます
すべてのJavaScriptで行わなければならないのHTMLキャンバスに描画します：
例
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
»それを自分で試してみてください ステップ1：キャンバス要素を探します
まず第一に、あなたが見つけなければならない<canvas>要素を。
これは、HTML DOMメソッド使用して行われgetElementById() ：
var canvas = document.getElementById("myCanvas");
ステップ2：描画オブジェクトを作成します。
第二に、あなたはキャンバスの描画オブジェクトが必要です。
getContext()描画のためのプロパティとメソッドと、ビルトインHTMLオブジェクトです。
var ctx = canvas.getContext("2d");
ステップ3：キャンバスに描きます
最後に、あなたはキャンバスに描くことができます。
赤色に描画オブジェクトの塗りつぶしスタイルを設定します。
ctx.fillStyle = "#FF0000";再びfillStyleプロパティはCSSカラー、グラデーション、パターンにすることができます。 デフォルトのfillStyleは黒です。
fillRect( x,y,width,height )メソッドは、キャンバス上で、塗りのスタイルで塗りつぶされた四角形を描画します：
ctx.fillRect(0,0,150,75);