var app = angular.module('plunker', []);
app.directive("drawing", function(){
return {
restrict: "A",
link: function(scope, element, attrs){
var rectSize = element[0].width;
var ctx = element[0].getContext('2d');
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,rectSize,rectSize);
var mobileoffsetX = 100;
var mobileoffsetY = 30;
var drawing = false;
var lastX, lastY;
var start = 'mousedown',
move = 'mousemove',
end = 'mouseup';
if (Modernizr.touch === true) {
start = 'touchstart';
move = 'touchmove';
end = 'touchend';
}
element.bind(start, function(event){
if(start == 'touchstart') {
event.preventDefault();
}
if(event.offsetX!==undefined){
lastX = event.offsetX;
lastY = event.offsetY;
} else if(event.pageX!==undefined) {
// Firefox compatibility
lastX = event.pageX - event.currentTarget.offsetLeft;
lastY = event.pageY - event.currentTarget.offsetTop;
} else {
// Mobile compatibility
lastX = event.originalEvent.targetTouches[0].pageX - mobileoffsetX;
lastY = event.originalEvent.targetTouches[0].pageY - mobileoffsetY;
}
ctx.beginPath();
drawing = true;
});
element.bind(move, function(event){
if(move == 'touchmove') {
event.preventDefault();
}
if(drawing){
if(event.offsetX!==undefined){
currentX = event.offsetX;
currentY = event.offsetY;
} else if(event.pageX!==undefined) {
currentX = event.pageX - event.currentTarget.offsetLeft;
currentY = event.pageY - event.currentTarget.offsetTop;
} else {
currentX = event.originalEvent.targetTouches[0].pageX - mobileoffsetX;
currentY = event.originalEvent.targetTouches[0].pageY - mobileoffsetY;
}
draw(lastX, lastY, currentX, currentY);
lastX = currentX;
lastY = currentY;
}
});
element.bind(end, function(event){
drawing = false;
});
function reset(){
element[0].width = element[0].width;
}
function draw(lX, lY, cX, cY){
ctx.moveTo(lX,lY);
ctx.lineTo(cX,cY);
ctx.lineWidth = 3;
ctx.strokeStyle = '#000000';
ctx.stroke();
}
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
<script data-require="modernizr@*" data-semver="2.6.2" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
<h1>Drawboard</h1>
<canvas id="draw-board" width="600" height="600" data-drawing></canvas>
</div>
</body>
</html>
/* Put your css in here */
#draw-board {
border: 3px solid black;
}