JustGoscha JustGoscha - 1 year ago 77
AngularJS Question

Is there already a canvas drawing directive for AngularJS out there?

Is there already a directive to draw/paint things on a canvas? So you can implement something like Paint or even something bigger like Photoshop etc., but a very basic example would suffice.

I haven't found one in my search and if there's already one that is considered best practice I would like to use it. Else I have to implement one myself.

Answer Source

Ok I did one and it is actually pretty easy:

app.directive("drawing", function(){
  return {
    restrict: "A",
    link: function(scope, element){
      var ctx = element[0].getContext('2d');

      // variable that decides if something should be drawn on mousemove
      var drawing = false;

      // the last coordinates before the current move
      var lastX;
      var lastY;

      element.bind('mousedown', function(event){
          lastX = event.offsetX;
          lastY = event.offsetY;
        } else { // Firefox compatibility
          lastX = event.layerX - event.currentTarget.offsetLeft;
          lastY = event.layerY - event.currentTarget.offsetTop;

        // begins new line

        drawing = true;
      element.bind('mousemove', function(event){
          // get current mouse position
            currentX = event.offsetX;
            currentY = event.offsetY;
          } else {
            currentX = event.layerX - event.currentTarget.offsetLeft;
            currentY = event.layerY - event.currentTarget.offsetTop;

          draw(lastX, lastY, currentX, currentY);

          // set current coordinates to last one
          lastX = currentX;
          lastY = currentY;

      element.bind('mouseup', function(event){
        // stop drawing
        drawing = false;

      // canvas reset
      function reset(){
       element[0].width = element[0].width; 

      function draw(lX, lY, cX, cY){
        // line from
        // to
        // color
        ctx.strokeStyle = "#4bf";
        // draw it

And then you can use it on canvas like this:

<canvas drawing></canvas>

Here's a demo on Plunkr: http://plnkr.co/aG4paH

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download