The directive approach to this:
HTML:
<canvas id="canvas" resize draw></canvas>
directive:
app.directive('draw', function () {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
var path;
var drag = false;
function mouseUp(event) {
//Clear Mouse Drag Flag
drag = false;
}
function mouseDrag(event) {
if (drag) {
path.add(new paper.Point(event.layerX, event.layerY));
path.smooth();
}
}
function mouseDown(event) {
//Set flag to detect mouse drag
drag = true;
path = new paper.Path();
path.strokeColor = 'black';
path.add(new paper.Point(event.layerX, event.layerY));
}
function initPaper() {
paper.install(window);
paper.setup('canvas');
}
element.on('mousedown', mouseDown).on('mouseup', mouseUp).on('mousemove', mouseDrag);
initPaper();
}
};
});