Interact - Simple Drawing Demo

by DamonOehlman

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/eve/master/eve.min.js"></script>
<script src="https://raw.github.com/DamonOehlman/interact/master/interact.js"></script>
<canvas id="test" width="300px" height="300px"></canvas>

CSS

body {
    margin: 4px;
}

#test {
    border: 1px solid black;
}

JavaScript

// get the 2d context for the canvas
var context = document.getElementById('test').getContext('2d');

// capture interaction from the test element
interact('test')
    
    // handle pointer down events (mouse and touch)
    .on('down', function(evt, absXY, relXY) {
        context.beginPath();
        context.moveTo(relXY.x, relXY.y);
    })
    
    // handle pointer move events
    .on('move', function(evt, absXY, relXY) {
        context.lineTo(relXY.x, relXY.y);
        context.stroke();            
    })
        
    // handle pointer up events
    .on('up', function(evt, absXY, relXY) {
        context.closePath();
    });