f8g

Text to Canvas

この前のネタ、テキスト手書きとかすると酷いことになるなー、と思ったのでFx3独自仕様を使って文字を描画します。Canvas上をダブルクリック。日本語も可能でした(Windows)。
文字を描く | MDN
座標は適当にやってるので、ちゃんと調整しないとマズイ。

// ==UserScript==
// @name          Text to Canvas
// @namespace     http://d.hatena.ne.jp/arikui/
// @include       *
// ==/UserScript==

var context = null;
var input   = document.body.appendChild(document.createElement("input"));
var offset  = Math.round(input.getBoundingClientRect().height / 2);

input.style.position = "absolute";
input.style.display  = "none";

input.addEventListener("keyup", function(e){
	if(e.keyCode !== 13)
		return;

	var rect = input.getBoundingClientRect();

	context.translate(rect.left, rect.top);
	context.mozDrawText(e.target.value);
	context.fill();
	context.translate(-rect.left, -rect.top);

	input.value = "";
	input.style.display = "none";
}, false);

document.body.addEventListener("dblclick", function(e){
	if(e.target.tagName.toLowerCase() != "canvas")
		return;

	context = e.target.getContext("2d");
	input.focus();

	(function(style){
		style.display = "block";
		style.zIndex  = getComputedStyle(e.target, "").zIndex * 1 + 1 || "9999";
		style.left    = e.clientX + "px";
		style.top     = e.clientY - offset + "px";
	})(input.style);
}, false);

keyword:Firefox独自仕様
keyword:IE独自仕様