JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/css/bootstrap-responsive.min.css">
    <div class="container">
        <div class="page-header">
            <h1>RxJS Canvas Paint Example</h1>
            <p class="lead">Example to show combining mouse events to draw on an HTML5 Canvas</p>
        </div>
        <div class="row-fluid">    
            <canvas id="tutorial" width="640" height="480"></canvas>
        </div>
    </div>
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/2.3.1/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.11/rx.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.11/rx.binding.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.3/rx.dom.js"></script>

CSS

canvas {
    background-color: #cccccb;
}

html  {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

JavaScript

// Calcualte offset either layerX/Y or offsetX/Y
function getOffset(event) {
    return { 
        offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
        offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
    };
}

function main() {
    var canvas = document.querySelector('#tutorial');
    
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        
        // Get mouse moves
        var mouseMoves = Rx.DOM.fromEvent(canvas, 'mousemove');
        
        // Calculate difference between two mouse moves
        var mouseDiffs = mouseMoves.bufferWithCount(2, 1).select(function (x) {
            return { first: getOffset(x[0]), second: getOffset(x[1]) };
        });
        
        // Get merge together both mouse up and mouse down
        var mouseButton = Rx.DOM.fromEvent(canvas, 'mousedown').select(function (x) { return true; })
        .merge(Rx.DOM.fromEvent(canvas, 'mouseup').select(function (x) { return false; }));
        
        // Paint if the mouse is down
        var paint = mouseButton.select(function (down) { return down ? mouseDiffs : mouseDiffs.take(0) }).switchLatest();
        
        // Update the canvas
        paint.subscribe(function (x) {
            ctx.moveTo(x.first.offsetX, x.first.offsetY);
            ctx.lineTo(x.second.offsetX, x.second.offsetY);
            console.log(x.first);
            console.log(x.second);
            ctx.stroke();
        });
    }
}

main();