Skip to content

Instantly share code, notes, and snippets.

@ElemarJR
Created November 21, 2011 23:52
Show Gist options
  • Save ElemarJR/1384388 to your computer and use it in GitHub Desktop.
Save ElemarJR/1384388 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment