Live update of rgba using clientX/clientY?

Question

The code below works until line 47 is replaced with line 48 (i.e. calculating the fillStyle). For some reason attempting to use clientY to calculate the blue portion of the rgba doesn't work, whereas calculating the alpha is not a problem.

<!DOCTYPE html>
<html>

<head>
    <title> My Animation </title>
</head>

<body>
    <canvas id="myCanvas" height="768" width="1200"></canvas>
</body>
<script>
    var mainCanvas = document.getElementById("myCanvas");
    var ctx = mainCanvas.getContext('2d');
    var canvasWidth = mainCanvas.width;
    var canvasHeight = mainCanvas.height;
    // the array of squares
    var squares = [];

    var mouseX = 1200;
    var mouseY = 768;
    var putPoint = function (e) {
        // update mouse
        mouseX = e.clientX;
        mouseY = e.clientY;
    }
    mainCanvas.addEventListener("click", putPoint);

    for (i = 0; i < 100; i++) {
        squares.push(new Square());
    }

    function Square() {
        this.x = Math.random() * 1024;
        this.y = Math.random() * 768;
        this.inc = Math.random() * 360;
        this.angle = 0;
        this.speed = Math.random() * 6 - 3;
    }

    Square.prototype.update = function () {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.beginPath();
        ctx.rect(-25, -25, 50, 50);
        ctx.closePath();
//        ctx.fillStyle = "rgba(255,0," + 150 + "," + mouseX/1024 + ")";
        ctx.fillStyle = "rgba(255,0," + mouseY/768*255 + "," + mouseX/1024 + ")";
        console.log(mouseY/768*255);
        ctx.fill();
        ctx.restore();
        this.inc = this.inc + this.speed;
        this.angle = this.inc % 360 / 57.2958;

    }

    function draw() {
        ctx.clearRect(0, 0, 1024, 768);
        for (var i = 0; i < squares.length; i++) {
            var myBox = squares[i];
            myBox.update();
        }
        requestAnimationFrame(draw);
    }

    draw();
</script>

Try to debug it: console.log("rgba(255,0," + mouseY/768*255 + "," + mouseX/1024 + ")") to see why value is incorrect. — Zydnar, May 14 '17 at 10:14

Michał Sałaciński · Answer 1 · 2017-05-14T10:21:47.590

1

It's just that RGB values should be integer, according to CSS spec: w3schools. Math.floor your B value and it'll work.

edited May 14 '17 at 10:21

answered May 14 '17 at 10:16

Michał Sałaciński

2,256
1
11
10

2

w3school is unrelated to w3c and doesn't represent specs at all. CSS3 specs [are here](https://drafts.csswg.org/css-color-3/#numerical) and indeed limited the notation to integer values, while [CSS4 specs](https://drafts.csswg.org/css-color/#funcdef-rgb) now expressly allows floating notation, which is supported in FF. – Kaiido May 14 '17 at 10:27

score 1 · Accepted Answer · answered May 14 '17 at 10:29

The Red, Green and Blue values should be integers. You can make them integers by using the Math.floor() method. Below is your fixed code.

<!DOCTYPE html>
<html>

<head>
    <title> My Animation </title>
</head>

<body>
    <canvas id="myCanvas" height="768" width="1200"></canvas>
</body>
<script>
    var mainCanvas = document.getElementById("myCanvas");
    var ctx = mainCanvas.getContext('2d');
    var canvasWidth = mainCanvas.width;
    var canvasHeight = mainCanvas.height;
    // the array of squares
    var squares = [];

    var mouseX = 1200;
    var mouseY = 768;
    var putPoint = function (e) {
        // update mouse
        mouseX = e.clientX;
        mouseY = e.clientY;
    }
    mainCanvas.addEventListener("click", putPoint);

    for (i = 0; i < 100; i++) {
        squares.push(new Square());
    }

    function Square() {
        this.x = Math.random() * 1024;
        this.y = Math.random() * 768;
        this.inc = Math.random() * 360;
        this.angle = 0;
        this.speed = Math.random() * 6 - 3;
    }

    Square.prototype.update = function () {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.beginPath();
        ctx.rect(-25, -25, 50, 50);
        ctx.closePath();
        //ctx.fillStyle = "rgba(255,0," + 150 + "," + mouseX/1024 + ")";

        ctx.fillStyle = "rgba(255,0," + Math.floor(mouseY/768*255) + "," + mouseX/1024 + ")";
        
        //console.log(mouseY/768*255);
        ctx.fill();
        ctx.restore();
        this.inc = this.inc + this.speed;
        this.angle = this.inc % 360 / 57.2958;

    }

    function draw() {
        ctx.clearRect(0, 0, 1024, 768);
        for (var i = 0; i < squares.length; i++) {
            var myBox = squares[i];
            myBox.update();
        }
        requestAnimationFrame(draw);
    }

    draw();
</script>

Thanks Abhinav, that works - I should have thought of that! – RonH May 14 '17 at 10:42 — RonH, May 14 '17 at 10:42

Live update of rgba using clientX/clientY?

2 Answers2