CODEWITHSUNDEEP
javascripthtmlangularjscanvas
Carlos
Carlos

Reputation: 79

AngularJS write on an image with canvas

I have an image in my html that I get with an id:

<img id={{idImage}} ng-src="http://localhost:3000/images/{{idImage}}"/>

I have in one of my scope some coordinate (x, y, w, h).

In my controller: 

$scope.coordinate;

But I don't know how to draw with canvas on the image according to the coordinates.

Thanks for your help!

Upvotes: 1

Views: 10754

Answers (1)

Pogrindis
Pogrindis

Reputation: 8101

Something like the following simple example.

var drawingCanvas = document.getElementById($scope.idImage);
var context = drawingCanvas.getContext('2d');

$scrope.draw = function() {
context.drawImage($scope.idImage, $scope.coordinate.x, $scope.coordinate.y, $scope.coordinate.w, $scope.coordinate.h);
}

Fiddle JS Example #1 Fiddle JS Example #2

There is nothing special about the draw in canvas just because you're using angular.

Some excellent examples here : Draw HTML5 Canvas

Upvotes: 5

Related Questions