This AngularJS code snippet enables you to create interactive drawings using the HTML5 canvas element. This code, designed as an AngularJS directive, allows users to draw lines on a canvas by clicking and dragging the mouse. You can integrate this functionality into your AngularJS application and provide an engaging drawing experience for your users.
Whether you’re building a collaborative whiteboard, an online sketching tool, or simply want to add a fun drawing feature to your website, this AngularJS Canvas Drawing code is the perfect solution.
How to Create Angularjs Canvas Drawing
1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your webpage.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
2. Create the canvas element with a unique id and place it where you want to display the drawing board:
<body ng-app="app">
<div id="d">
<h1>Simple Canvas Drawing Directive in AngularJS</h1>
<p>click and drag to draw!</p>
<canvas width="500" height="300" id="canvas" drawing></canvas>
</div>
</body>
3. Style the drawing board using the following CSS styles:
/* Styles go here */
body {
font-family: "Eau Naturelle", "Helvetica", "Arial", "Lucida Grande", "Gill Sans", "Verdana", sans-serif;
font-weight: 100;
color: #444;
background-color: #ddd;
}
#canvas {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background-color: #FFF;
box-shadow: 0 9px 20px -5px rgba(0, 0, 0, 0.8);
margin: 20px auto;
}
#d {
text-align: center;
}
h1 {
color: #444;
font-family: "Eau Naturelle", "Helvetica", "Arial", "Lucida Grande", "Gill Sans", "Verdana", sans-serif;
font-weight: 500;
}
a {
color: #4a9;
text-decoration: none;
font-style: italic;
font-weight: 800;
}
4. Load the AngularJS by adding the following CDN link before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.min.js'></script>
5. Finally, use the following Angular function in your project to enable drawing functionality.
var app = angular.module("app", []);
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){
if(event.offsetX!==undefined){
lastX = event.offsetX;
lastY = event.offsetY;
} else {
lastX = event.layerX - event.currentTarget.offsetLeft;
lastY = event.layerY - event.currentTarget.offsetTop;
}
// begins new line
ctx.beginPath();
drawing = true;
});
element.bind('mousemove', function(event){
if(drawing){
// get current mouse position
if(event.offsetX!==undefined){
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
ctx.moveTo(lX,lY);
// to
ctx.lineTo(cX,cY);
// color
ctx.strokeStyle = "#4bf";
// draw it
ctx.stroke();
}
}
};
});
That’s all! hopefully, you have successfully integrated this AngularJS Canvas Drawing feature into your project. If you have any questions or suggestions, feel free to comment below.
