Nested jQuery Layout plugin with AngularJS directives

angularjs, jquery, plugin, layout, nested, directives

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body ng-app="myApp">
    <div my-directive></div>
</body>

CSS

.Ribua {
    background-color: blue; height: 100px; width: 100px; position: absolute; top: 100px; left: 100px;
}

JavaScript

var app = angular.module('myApp', []);

app.directive('myDirective', function() {
    return {
        template:'<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>',
    	scope: {},
        link: function (scope, element, attrs) {
          
            var isMouseDown = false;
            
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
            
            c.onmousedown = function(){
                isMouseDown = true;
            	//alert("down");
            }
            c.onmouseup = function(){
            isMouseDown = false;
                //alert("up");
            }
            c.onmousemove = function(e){
                if(isMouseDown == false) return;
                
                x = e.pageX - c.offsetLeft;
  				y = e.pageY - c.offsetTop;
                ctx.clearRect(0, 0, c.width, c.height);
                ctx.beginPath();
				ctx.arc(100, x, y, 0, 2 * Math.PI);
				ctx.stroke();
            	//alert("move");
            }
            
        }
    }
});