CODEWITHSUNDEEP
javascripthtmlcssangularjs
Mark Schuurman
Mark Schuurman

Reputation: 717

Change border color of canvas in AngularJS

I am learning AngularJS at the moment and I wrote a website that contains a canvas. My goal is to change the color of the border after clicking on a checkbox.

canvas.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <link rel="stylesheet" type="text/css" href="/canvas/canvas.css">
</head>

<body ng-app="ngAnimate">

    <canvas id="myCanvas" width="1200" height="800"></canvas>
    <script src="/canvas/canvas.js"></script>

    <h1>Change color: <input type="checkbox" ng-model="checkBox"></h1>

    <div ng-canvasGreen="checkBox"></div>

    <script src="/scripts/angular.min.js"></script>
    <script src="/scripts/angular-animate.js"></script>

</body>
</html>

canvas.js

// useful to have them as global variables
var canvas, ctx, mousePos, mouseButton;

window.onload = function init() {
    // called AFTER the page has been loaded
    canvas = document.querySelector("#myCanvas");

    // often useful
    w = canvas.width;
    h = canvas.height;
    scale = w / 150;

    // important, we will draw with this object
    ctx = canvas.getContext('2d');

    // ready to go !
    // filled rectangle
    ctx.fillStyle = 'red';
    ctx.fillRect(10 * scale, 10 * scale, 30 * scale, 30 * scale);

    // wireframe rectangle
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 4 * scale;
    ctx.strokeRect(100 * scale, 40 * scale, 40 * scale, 40 * scale);
    ctx.fillStyle = 'yellow';
    ctx.fillRect(100 * scale, 40 * scale, 40 * scale, 40 * scale);

    // fill circle, will use current ctx.fillStyle
    ctx.beginPath();
    ctx.arc(60 * scale, 60 * scale, 10 * scale, 0 * scale, 2 * scale * Math.PI);
    ctx.fill();

    // some text
    ctx.fillStyle = "purple";
    ctx.font = 20 * scale + "px Arial";
    ctx.fillText("Hello!", 60 * scale, 20 * scale);

    canvas.addEventListener('mousemove', function (evt) {
        mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + Math.round(mousePos.x, 0) + ',' + Math.round(mousePos.y,0);
        writeMessage(canvas, message);
    }, false);

    canvas.addEventListener('mousedown', function (evt) {
        mouseButton = evt.button;
        var message = "Mouse button " + evt.button + " down at position: " + Math.round(mousePos.x,0) + ',' + Math.round(mousePos.y,0);
        writeMessage(canvas, message);
    }, false);

    canvas.addEventListener('mouseup', function (evt) {
        var message = "Mouse up at position: " + Math.round(mousePos.x,0) + ',' + Math.round(mousePos.y,0);
        writeMessage(canvas, message);
    }, false);
}

function writeMessage(canvas, message) {
    ctx.save();
    ctx.clearRect(0, 0, 600, 50);
    ctx.font = '18pt Calibri';
    ctx.fillStyle = 'black';
    ctx.fillText(message, 10, 25);
    ctx.restore();
}

function getMousePos(canvas, evt) {
    // necessary to take into account CSS boundaries
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

canvas.css

canvas {
   transition: all linear 1.5s;
   border: 1px solid black;
   border-width: 15px;
}

.ng-canvasGreen {
   border: 1px solid green;
   border-width: 15px;
}

The problem that I have is when I click on the checkbox, nothing happens and the border remains black.

Upvotes: 0

Views: 1593

Answers (1)

Dhaarani
Dhaarani

Reputation: 1360

Try below code

var app = angular.module('ngAnimate', []);
app.controller('myCtrl', function($scope) {
$scope.changeborder = function(event){
  if(event.target.checked == true){
    $("canvas").css("border-color","red");
  }
  if(event.target.checked == false){
    $("canvas").css("border-color","yellow");
  }
}
// useful to have them as global variables
var canvas, ctx, mousePos, mouseButton;

window.onload = function init() {
    // called AFTER the page has been loaded
    canvas = document.querySelector("#myCanvas");

    // often useful
    w = canvas.width;
    h = canvas.height;
    scale = w / 150;

    // important, we will draw with this object
    ctx = canvas.getContext('2d');

    // ready to go !
    // filled rectangle
    ctx.fillStyle = 'red';
    ctx.fillRect(10 * scale, 10 * scale, 30 * scale, 30 * scale);

    // wireframe rectangle
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 4 * scale;
    ctx.strokeRect(100 * scale, 40 * scale, 40 * scale, 40 * scale);
    ctx.fillStyle = 'yellow';
    ctx.fillRect(100 * scale, 40 * scale, 40 * scale, 40 * scale);

    // fill circle, will use current ctx.fillStyle
    ctx.beginPath();
    ctx.arc(60 * scale, 60 * scale, 10 * scale, 0 * scale, 2 * scale * Math.PI);
    ctx.fill();

    // some text
    ctx.fillStyle = "purple";
    ctx.font = 20 * scale + "px Arial";
    ctx.fillText("Hello!", 60 * scale, 20 * scale);
    }
    });
canvas {
   transition: all linear 1.5s;
   border: 1px solid black;
   border-width: 15px;
}

.ng-canvasGreen {
   border: 1px solid green;
   border-width: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <link rel="stylesheet" type="text/css" href="/canvas/canvas.css">
</head>

<body ng-app="ngAnimate" ng-controller="myCtrl">

    <canvas id="myCanvas" width="1200" height="800"></canvas>
    <script src="/canvas/canvas.js"></script>

    <h1>Change color: <input type="checkbox" ng-click="changeborder($event)" ng-model="checkBox"></h1>

    <div ng-canvasGreen="checkBox"></div>

    <script src="/scripts/angular.min.js"></script>
    <script src="/scripts/angular-animate.js"></script>

</body>
</html>

Upvotes: 1

Related Questions