tango238 · August 26, 2011 23:55
diff --git a/paint.html b/paint.html

 <!DOCTYPE HTML> 
 <html lang="ja"> 
 <head> 
 	<meta charset="UTF-8"> 
 	<title>Paint</title> 
 </head> 
 <body> 
 <header> 
 	<h1>Paint</h1> 
 </header> 
 <article> 
 <p> 
 	Mouse Position: <output id="out"></output> 
 </p> 
 <p> 
 	<canvas id="canvas" width="1024" height="450"></canvas> 
 </p> 
 <p> 
 	<button id="clear">Clear</button> 
    <button id="save">Save</button> 
 </p> 
 </article> 
 <script> 
 (function(){
 
     // Canvas
     var canvas = document.getElementById('canvas');
     var context = canvas.getContext('2d');
     // flag
     var isDrawing = false;
     // Brush
     context.lineWidth = 5;
     context.lineCap = 'round';
     context.fillStyle = 'black';
     context.strokeStyle = 'black';
 
    // マウスの動きを監視する
    canvas.addEventListener('mousemove', function(event){
        event.preventDefault();
        var out = document.getElementById('out');
        var p = getMousePosition(event);
        out.value = "x:" + p.x + " y:" + p.y;
    });
    canvas.addEventListener('mousedown', function(event){
        event.preventDefault();
        isDrawing = true;
        var p = getMousePosition(event);
        context.beginPath();
        context.arc(p.x, p.y, context.lineWidth / 2, 0, Math.PI * 2, true);
        context.fill();
        context.beginPath();
        context.moveTo(p.x, p.y);
    });
    canvas.addEventListener('mousemove', function(event){
        event.preventDefault();
        if(isDrawing){
            draw(event, context);
        }
    });
    canvas.addEventListener('mouseup', function(event){
        event.preventDefault();
        if(isDrawing){
            draw(event, context);
            isDrawing = false;
        }
    });
    canvas.addEventListener('mouseout', function(event){
        event.preventDefault();
        if(isDrawing){
            draw(event, context); 
            isDrawing = false;
        }
    });
 
    // Clear
    var btnClear = document.getElementById('clear');
        btnClear.addEventListener('click', function(){
        context.clearRect(0, 0, canvas.width, canvas.height);
    });
    // Save
    var btnSave = document.getElementById('save');
        btnSave.addEventListener('click', function(){
        var dataUrl = canvas.toDataURL();
        window.open(dataUrl, "new image");
    });
 
    // マウスのポジションを取得するメソッド
    function getMousePosition(event){
        var rect = event.target.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }
    function draw(event, context){
        var p = getMousePosition(event);
        context.lineTo(p.x, p.y);
        context.stroke();
        context.beginPath();
        context.moveTo(p.x, p.y);
    }
 })();
 
 </script> 
 </body> 
 </html>

	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Paint</title>
	</head>
	<body>
	<header>
	<h1>Paint</h1>
	</header>
	<article>
	<p>
	Mouse Position: <output id="out"></output>
	</p>
	<p>
	<canvas id="canvas" width="1024" height="450"></canvas>
	</p>
	<p>
	<button id="clear">Clear</button>
	<button id="save">Save</button>
	</p>
	</article>
	<script>
	(function(){

	// Canvas
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	// flag
	var isDrawing = false;
	// Brush
	context.lineWidth = 5;
	context.lineCap = 'round';
	context.fillStyle = 'black';
	context.strokeStyle = 'black';

	// マウスの動きを監視する
	canvas.addEventListener('mousemove', function(event){
	event.preventDefault();
	var out = document.getElementById('out');
	var p = getMousePosition(event);
	out.value = "x:" + p.x + " y:" + p.y;
	});
	canvas.addEventListener('mousedown', function(event){
	event.preventDefault();
	isDrawing = true;
	var p = getMousePosition(event);
	context.beginPath();
	context.arc(p.x, p.y, context.lineWidth / 2, 0, Math.PI * 2, true);
	context.fill();
	context.beginPath();
	context.moveTo(p.x, p.y);
	});
	canvas.addEventListener('mousemove', function(event){
	event.preventDefault();
	if(isDrawing){
	draw(event, context);
	}
	});
	canvas.addEventListener('mouseup', function(event){
	event.preventDefault();
	if(isDrawing){
	draw(event, context);
	isDrawing = false;
	}
	});
	canvas.addEventListener('mouseout', function(event){
	event.preventDefault();
	if(isDrawing){
	draw(event, context);
	isDrawing = false;
	}
	});

	// Clear
	var btnClear = document.getElementById('clear');
	btnClear.addEventListener('click', function(){
	context.clearRect(0, 0, canvas.width, canvas.height);
	});
	// Save
	var btnSave = document.getElementById('save');
	btnSave.addEventListener('click', function(){
	var dataUrl = canvas.toDataURL();
	window.open(dataUrl, "new image");
	});

	// マウスのポジションを取得するメソッド
	function getMousePosition(event){
	var rect = event.target.getBoundingClientRect();
	return {
	x: event.clientX - rect.left,
	y: event.clientY - rect.top
	};
	}
	function draw(event, context){
	var p = getMousePosition(event);
	context.lineTo(p.x, p.y);
	context.stroke();
	context.beginPath();
	context.moveTo(p.x, p.y);
	}
	})();

	</script>
	</body>
	</html>