Untitled

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Drawing</title>
</head>
<body ng-app = "canvasDrawing2" ng-controller = "canvasController">
  <canvas id="mainCanvas" width="600" height="300" style="border: 1px solid black"></canvas>
  <div>
    <input type = "button" value = "Start" ng-click = "draw()"/>
     <input type = "button" value = "Stop" ng-click = "stop()"/>
  </div>
</body>
</html>
var app = angular.module("canvasDrawing2",[]);
app.controller("canvasController",function($scope){
  $scope.ctx = document.getElementById("mainCanvas").getContext("2d");
  $scope.draw = function(){
    var colors = [255,0,0];
    for(var i = 25; i < 300; i+=50){
      for(var k = 25; k < 600; k+=50){
        $scope.ctx.beginPath();
    $scope.ctx.arc(k, i, 25, 0, 2*Math.PI);
        $scope.ctx.fillStyle = "rgb("+  colors[0] +","+  colors[1] + ","+ colors[2] +")";
       if(colors[0] == 255){
         colors = [0,255,0];
       }
       else if(colors[1] == 255){
          colors = [0,0,255];
       }
        else{ colors = [255,0,0];}
    $scope.ctx.stroke();
    $scope.ctx.fill();
        $scope.ctx.closePath();
      }
    }
  };
  $scope.stop = function(){ $scope.ctx.clearRect(0,0, 600, 300);};
});