半透明で線を引くやつ

gistfile1.js

var last_image, pos, down = false;
var canvas;
var ctx = canvas.getContext('2d');
var getPos =  function(evt) {
	var rect = canvas.getBoundingClientRect();
	return {
		x: (evt.clientX - rect.left),
		y: (evt.clientY - rect.top)
	};
};

canvas.addEventListener('mousedown', function (e) {
	down = true;
	last_image = ctx.getImageData(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
	pos = getPos(e);
	ctx.moveTo(pos.x, pos.y);
}, false);
window.addEventListener('mousemove', function (e) {
	if (!down) return;
	ctx.putImageData(last_image, 0, 0);
	pos = getPos(e);
	ctx.lineTo(pos.x, pos.y);
	ctx.stroke();
}, false);
window.addEventListener('mouseup', function (e) {
	if (!down) return;
	ctx.putImageData(last_image, 0, 0);
	pos = getPos(e);
	ctx.lineTo(pos.x, pos.y);
	ctx.stroke();
	ctx.closePath();
	down = false;
}, false);