Mark Schuurman Mark Schuurman - 3 years ago 81
AngularJS Question

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.

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download