ElemarJR/composing_events.htm

## composing_events.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        canvas
        {
            margin: 10px auto;
            border: 1px solid black;
            display: block;
            background-color: White;
        }
    </style>
</head>
<body>
    <canvas id="target" width="500" height="500">
    </canvas>
    <script src="dependencies/rx.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="dependencies/rx.html.js" type="text/javascript"></script>
    <script src="dependencies/rx.jQuery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var mouseMove = $(document).toObservable("mousemove");
            var mouseDown = $(document).toObservable("mousedown");
            var mouseUp = $(document).toObservable("mouseup");

            var canvas = $("#target");
            var context = canvas.get(0).getContext('2d');

            function getCoords(e) {
                if (e.offsetX)
                    return { x: e.offsetX, y: e.offsetY };
                return { x: e.pageX - canvas.get(0).offsetLeft, y: e.pageY - canvas.get(0).offsetTop };
            }

            var mouseMoveWithButtonDown = mouseDown.SelectMany(function (down) {
                return mouseMove
                    .Select(function (move) {
                        return {
                            start: getCoords(down),
                            current: getCoords(move)
                        }
                    })
                    .TakeUntil(mouseUp)
            }
            );

            mouseMoveWithButtonDown.Subscribe(function (e) {
                context.beginPath();
                context.moveTo(e.start.x, e.start.y);
                context.lineTo(e.current.x, e.current.y);
                context.stroke();
            });
        });
    </script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<style type="text/css">
	canvas
	{
	margin: 10px auto;
	border: 1px solid black;
	display: block;
	background-color: White;
	}
	</style>
	</head>
	<body>
	<canvas id="target" width="500" height="500">
	</canvas>
	<script src="dependencies/rx.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="dependencies/rx.html.js" type="text/javascript"></script>
	<script src="dependencies/rx.jQuery.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {
	var mouseMove = $(document).toObservable("mousemove");
	var mouseDown = $(document).toObservable("mousedown");
	var mouseUp = $(document).toObservable("mouseup");

	var canvas = $("#target");
	var context = canvas.get(0).getContext('2d');

	function getCoords(e) {
	if (e.offsetX)
	return { x: e.offsetX, y: e.offsetY };
	return { x: e.pageX - canvas.get(0).offsetLeft, y: e.pageY - canvas.get(0).offsetTop };
	}

	var mouseMoveWithButtonDown = mouseDown.SelectMany(function (down) {
	return mouseMove
	.Select(function (move) {
	return {
	start: getCoords(down),
	current: getCoords(move)
	}
	})
	.TakeUntil(mouseUp)
	}
	);

	mouseMoveWithButtonDown.Subscribe(function (e) {
	context.beginPath();
	context.moveTo(e.start.x, e.start.y);
	context.lineTo(e.current.x, e.current.y);
	context.stroke();
	});
	});
	</script>
	</body>
	</html>