HTML5のCanvasサンプルです。
お絵かきキャンバス。マウスボタンを押しながら、マウスを移動させると、絵が描けます。
↓↓ここがキャンバス↓↓




トップページ
<canvas id="canvas" width="500" height="600" />

var drawing = false;
function Draw(e) {
	var canvas = document.getElementById("canvas");
	// clientX,Yはdocument起点のため、Canvasの座標系に変換
	var x = e.clientX - canvas.getBoundingClientRect().left;
	var y = e.clientY - canvas.getBoundingClientRect().top;
	if (drawing) {
		var ctx = canvas.getContext('2d');
		ctx.lineWidth = 20;
		ctx.lineCap = "round";
		ctx.beginPath();
		ctx.moveTo(lastX,lastY);
		ctx.lineTo(x,y);
		var r = Math.floor(Math.random()*1000) % 256;
		var g = Math.floor(Math.random()*1000) % 256;
		var b = Math.floor(Math.random()*1000) % 256;
		var a = Math.floor(Math.random()*1000) % 256;
		var rgba = "rgba(" + r + "," + g + "," + b + "," + a + ")";
		ctx.strokeStyle = rgba;
		ctx.stroke();
		lastX = x;
		lastY = y;
	}
	document.getElementById("msgarea").innerHTML = x + "," +  y;
}
function DrawInit(e) {
	var canvas = document.getElementById("canvas");
	// clientX,Yはdocument起点のため、Canvasの座標系に変換
	lastX = e.clientX - canvas.getBoundingClientRect().left;
	lastY = e.clientY - canvas.getBoundingClientRect().top;
	drawing = true;
}
function DrawEnd() {
	drawing = false;
}
function Erase() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');
	ctx.clearRect(0,0,500,700);
}