Canvas with Angular

by Mirosław Hajkowski

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="app" class="container">
    <div class="row">
        <canvas id="canvas" width="500" height="200"></canvas>
    </div>
    <div ng-controller="Ctrl" class="row">
        <div class="span5 well">
          <input id="first" type="text" ng-model="square.height" class="span2"/>

          <input id="second" type="text" ng-model="square.width" class="span2"/>
    </div>    
</div>

JavaScript

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

function Ctrl($scope, squareDrawer) {
    $scope.square = {
        height: '100',
        width: '100'
    };
    $scope.$watch('square', function(newValue, oldValue) {
        if (newValue != oldValue) {
            console.log('value changed: ' + JSON.stringify($scope.square));
            squareDrawer.draw(newValue.height, newValue.width);
        }
    }, true);
}


app.factory('squareDrawer', function() {
    var registry = {};

    var squareDrawer = {
        /**
         * draw the square on the canvas
         */
        draw: function(height, width) {
            console.log("square to draw: " + height + "x" + width);

            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                console.log("drawing");
                var ctx = canvas.getContext("2d");
                //clear the canvas
                ctx.clearRect(0,0, canvas.width, canvas.height);

                ctx.fillRect(0, 0, width, height);
            }
        }
    };


    return squareDrawer;
});