canvas の DOM エレメント (コンテキストではない) から  toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているので すが、残念ながら Chrome にはまだ実装されていませ ん。そこで下記の方法 を使って png や jpeg など、任意の画像形式で Blob を作ることができます。

/***
canvas に絵を書くコード
***/
var type = 'image/jpeg';
// canvas から DataURL で画像を出力
var dataurl = canvas.toDataURL(type);
// DataURL のデータ部分を抜き出し、Base64からバイナリに変換
var bin = atob(dataurl.split(',')[1]);
// 空の Uint8Array ビューを作る
var buffer = new Uint8Array(bin.length);
// Uint8Array ビューに 1 バイトずつ値を埋める
for (var i = 0; i < bin.length; i++) {
  buffer[i] = bin.charCodeAt(i);
}
// Uint8Array ビューのバッファーを抜き出し、それを元に Blob を作る
var blob = new Blob([buffer.buffer], {type: type});

これで jpeg 形式の Blob が完成です。type の部分を 'image/png' などに変更す ることで、当然ながら別の形式の画像を得ることもできます。この Blob を使えば例え ば

var url = window.URL.createObjectURL(blob);

としてその画像を参照する URL を取得することができます。破棄する前に window.URL.revokeObjectURL(url) するのも忘れないで下さい。これをダウンロードす るには、(破棄する前に) その URL を a タグに渡してあげます。

<a href="[blob url]" download="image.png">Download</a>

[blob url] の部分が先程作った Blob の URL、image.png の部分がダウンロード したもののファイル名になります。Blob が必要なければ  canvas.toDataURL('image/png') を直接 href 属性に渡してしまうのもアリです。