JavaScript:canvasにマウスで描画失敗作

最初に思い描いたイメージは、こんな感じでJavaScriptを使ってcanvasに絵を描くイメージ。

そして出来上がったのがこんな感じ・・・

これはこれで面白いといえば面白い。しかも何の役にも立たない。
だいたい何か作ろうとするとイメージとは違うものが最初に出来上がるものだ。
わたしが作るものは何でもそうだ。

JavaScriptのマウスイベントには、マウスを押したとき（押した状態のとき）とマウスを離したとき（押した後に元に戻したとき）のイベントが発生していることが分かった。マウスを動かしているときもイベントが発生しているようだ。しかし、マウスを動かしているときのイベントは、かなり精度が低いように感じた。描いた絵がカクカクしている。細かい絵はかけそうもない。（わたしの画力にとっては最適であるが）
ウインドウズに付属のペイントは、あらためて凄いソフトだと感じる。

ダメなブログラム

/*
* グローバル変数
*/

var $id = function(id){ return document.getElementById(id); };
var canvas = null;					// キャンバス
var g = null;						// コンテキスト
var mouse = { x: null, y:null };		// マウスの現在位置
var endMouse = { x: null, y:null };	// 終了座標
var startMouse = { x: null, y:null };	// 開始座標
var drawFlag = false;				// フラグ：マウスが押されているとき絵を描く

/*
 メイン処理
 */

window.onload = function()
{
	canvas = $id("canvas");
	g = canvas.getContext("2d");
	// 初期化
	init();
	// 要素の上でマウスが動いた際の処理
	canvas.addEventListener("mousemove", function(e){
		// マウス位置を更新
		getMousePosOnElement(e);
		// 描画
		if(drawFlag) draw();
		startMouse.x = mouse.x;
		startMouse.y = mouse.y;
	}, false);
	// キャンバスでマウスを押したときの処理
	canvas.addEventListener("mousedown", function(e){
		drawFlag = true;
		// マウス位置を更新
		getMousePosOnElement(e);
		startMouse.x = mouse.x;
		startMouse.y = mouse.y;
	}, false);
	// キャンバスでマウスを離したときの処理
	canvas.addEventListener("mouseup", function(e){
		drawFlag = false;
		// マウス位置を更新
		getMousePosOnElement(e);
		endMouse.x = mouse.x;
		endMouse.y = mouse.y;
	}, false);
	// キャンバスでダブルクリックしたときの処理
	canvas.addEventListener("dblclick", function(e){
		drawFlag = false;
		// クリア
		g.clearRect(0, 0, canvas.width, canvas.height);
		// 情報表示
		g.fillStyle = "rgba(255, 0, 0, 1.0)";
		g.fillText("マウスを押したままで描画／ダブルクリックで消去", 16, 16);
	}, false);
};
/*
 * マウス位置を取得
 */
var getMousePosOnElement = function(e){
	var rect = e.target.getBoundingClientRect();
	mouse.x = e.clientX - rect.left;
	mouse.y = e.clientY - rect.top;
	return mouse;
};
/*
 * 円を描く
 */
var draw = function(){
	// クリア
//	g.clearRect(0, 0, canvas.width, canvas.height);

	// 線を引く
	g.strokeStyle = "rgba(0, 50, 200, 1.0)";
	g.beginPath();
	g.moveTo(startMouse.x, startMouse.y);
	g.lineTo(endMouse.x, endMouse.y);
	g.stroke();
	g.closePath();
	// 情報表示
	g.fillStyle = "rgba(255, 0, 0, 1.0)";
	g.fillText("マウスを押したままで描画／ダブルクリックで消去", 16, 16);
};

/*
 * 初期化処理
 */
var init = function(e){
	// マウス位置を更新
//	getMousePosOnElement(e);

	startMouse.x = mouse.x;
	startMouse.y = mouse.y;
	draw();
};