이벤트 객체

이벤트 객체

이벤트 객체 속성	설명
event.pageX	브라우저의 화면을 기준으로 한 마우스의 X 좌표 위치
event.pageY	브라우저의 화면을 기준으로 한 마우스의 Y 좌표 위치
event.preventDefault()	기본 이벤트를 제거합니다.
event.stopPropagation()	이벤트 전달을 제거합니다

$(document).ready(function() {
	// 변수를 선언합니다
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');

	// 이벤트를 연결합니다.
	$(canvas).on({
		mousedown: function(event) {
			// 위치를 얻어냅니다.
			var position = $(this).offset();
			var x = event.pageX - position.left;
			var y = event.pageY - position.top;

			// 선을 그립니다.
			context.beginPath();
			context.moveTo(x, y);
		},
		mouseup: function(event) {
			var position = $(this).offset();
			var x = event.pageX - position.left;
			var y = event.pageY - position.top;
			
			// 선을 그립니다.
			context.lineTo(x, y);
			context.stroke();
		}
	});
	
});