生成した<canvas>要素のコンテキストIDを取得します。
未サポートの場合はnullを返すため、<canvas>要素が対応状況によるスクリプトエラーを避ける方法として用いられます。

canvas.getContext(contextId)

canvas に描画するための API にアクセスできるオブジェクトを返します。
指定の context ID が未サポートなら null を返します。

var canvas = document.getElementById('sample01');
if ( ! canvas || ! canvas.getContext ) {
	return false;
}
var context = canvas.getContext('2d');

生成した<canvas>要素のdata:URLを取得します。
生成した図形を指定された画像タイプのURLとして渡せます。
画像として再利用可能です。

canvas.toDataURL([type,...])

生成した<canvas>要素を画像データとしてのURLを取得します。
デフォルトの画像データは「image/png」です。
第1引数のtypeを指定すると、他の画像タイプにすることが出来ます。(省略可)
第2引数以降は、品質ラベル等となります。

リスト2. URLの取得

/* PNGとして */
var png = canvas.toDataURL();
document.getElementById("img0201").src = png;
/* JPEGとして */
var jpg = canvas.toDataURL('image/jpeg');
document.getElementById("img0202").src = jpg;

コーディング例

※<canvas>要素に対応しません。

PNGイメージの例

JPEGイメージの例

「canvas要素(4)　画像の読込」では、画像ファイルからイメージオブジェクトを得ました。
<canvas>要素は、空のイメージオブジェクトを生成したり、生成した<canvas>要素の中からイメージオブジェクトを切り出したり、取得したり出来ます。

context.createImageData(w, h)

幅 w 、高さ h のイメージオブジェクトを生成します。

context.createImageData(img)

イメージオブジェクト img のクローンを生成します。

context.getImageData(x, y, w, h)

生成した<canvas>要素のうち、座標(x, y)から幅 w 、高さ h の大きさで切り出します。

context.putImageData(img, x, y [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])

イメージオブジェクト img を、座標(x, y)に描画します。
dirtyX, dirtyY, dirtyWidth, dirtyHeight を指定すると、img の中の一部分を描画します。(省略可)

img.width

イメージオブジェクト img の幅 width プロパティ

img.heigt

イメージオブジェクト img の高さ heigt プロパティ

img.data

イメージオブジェクト img のRGBA順の一次配列 プロパティ

/* イメージの切り出し */
var img = context.getImageData(150, 0, 200, 100);
/* イメージの貼り付け */
context.putImageData(img, 150, 100);
/* 切り出したイメージの幅と高さ */
context.fillText("width  = " + img.width, 10, 120);
context.fillText("height = " + img.height, 10, 140);