キャンバスで遊び中 - テキスト表示

http://www.fujidig.com/misc/js/canvas/chars.html
キャンバスはテキストの表示ができませんが、ASCII文字テーブルの画像を用意して切り貼りすればそれっぽいことができます。

• http://www.fujidig.com/2008/06/images/chars.png

var run = function() {
	
	var draw_str = function(str, dx, dy, size) {
		var x = dx;
		var y = dy;
		var sWidth = 64;
		var sHeight = 152;
		var zoom = size / 128;
		var dWidth = sWidth * zoom;
		var dHeight = sHeight * zoom;
		
		var char_canvas = document.createElement('canvas');
		char_canvas.width = dWidth;
		char_canvas.height = dHeight;
		var char_ctx = char_canvas.getContext('2d');
		
		for( var i = 0, len = str.length; i < len; i ++) {
			var c = str.charCodeAt(i);
			if (c >= 0x7e) c = 0x3f; // '~' 以降は '?' に化かす
			if (c == 0x0a) { // '\n'
				x = dx;
				y += dHeight;
				continue;
			}
			if (c == 0x09) { // '\t'
				x = (((x - dx) / dWidth + 8) & ~7) * dWidth + dx;
				continue;
			}
			if (c < 0x20) c = 0x20; // その他の各種制御コード
			
			var sx = 64 * (c - 0x20);
			var sy = 0;
			char_ctx.globalCompositeOperation = 'source-over';
			char_ctx.clearRect(0, 0, dWidth, dHeight);
			char_ctx.fillStyle = ctx.fillStyle;
			char_ctx.fillRect(0, 0, dWidth, dHeight);
			char_ctx.globalCompositeOperation = 'destination-in';
			char_ctx.drawImage(imgChars, sx, sy, sWidth, sHeight, 0, 0, dWidth, dHeight);
			
			ctx.drawImage(char_canvas, x, y);
			x += dWidth;
		}
	};
	var canvas = document.body.appendChild(document.createElement('canvas'));
	canvas.width = 480;
	canvas.height = 360;
	var ctx = canvas.getContext('2d');
	draw_str('Hello, world!', 0, 0, 70);
	ctx.fillStyle = '#f00';
	draw_str('(>_<;)', 0, 80, 160);
}

var imgChars = new Image;
imgChars.onload = run;
imgChars.src = "chars.png";

追記(2008-06-14 17:04:41)

char_ctx.globalCompositeOperation = 'source-over'; を char_ctx.clearRect(0, 0, dWidth, dHeight); の前に移動した。
半透明の色でOperaでうまくクリアされてなかったので。