Angular Canvas Responsive Arrow

A technique to draw arrows with canvas

by valllabh

HTML

<div class="site-wdith">

  
    <canvas class="arrow" width="100%" height="20"></canvas>

</div>

CSS

.arrow {
  margin: 20px;
      width: 100%;
}

.site-wdith {
  width: 500px;
}

JavaScript

var CanvasArrow = angular.module('CanvasArrow', [])
.directive('arrow', function() {
  return {
    restrict: 'C',
    scope: {
    	stroke: '=',
      color: '=',
      margin: '='
    },
    link: function(s, e, a){
    	var c = e[0];
    	var ctx = c.getContext('2d');
      
      var margin = s.margin || 5;
      ctx.lineWidth = s.stroke || 2;
      ctx.strokeStyle = s.color || '#000000';
			

			var width = c.width;
      var height = c.height;
      var centerX = width/2;
      var centerY = height/2;
      
      ctx.lineCap = 'round';
      
      ctx.beginPath();
      ctx.moveTo(margin, centerY);
      ctx.lineTo(width, centerY);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(width, centerY);
      ctx.lineTo(width - centerY, margin );
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(width, centerY);
      ctx.lineTo(width - centerY, height - margin);
      ctx.stroke();
      
    }
  };
});