change the color of a polygon in javascript

Question

It is a simple code trying to change the color of a polygon in javascript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var polygon = [
  [100, 100],
  [100, 200],
  [200, 200],
  [200, 100]
];

// Draw the polygon
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(polygon[0][0], polygon[0][1]);
for (var i = 1; i < polygon.length; i++) {
  ctx.lineTo(polygon[i][0], polygon[i][1]);
}
ctx.closePath();
ctx.fill();

// Add event listener to change the color of the polygon when clicked
canvas.addEventListener("click", function(event) {
  var x = event.pageX - canvas.offsetLeft;
  var y = event.pageY - canvas.offsetTop;

  ctx.beginPath();
  ctx.moveTo(polygon[0][0], polygon[0][1]);
  for (var i = 1; i < polygon.length; i++) {
    ctx.lineTo(polygon[i][0], polygon[i][1]);
  }
  ctx.closePath();
  if (ctx.isPointInPath(x, y)) {
    if (ctx.fillStyle == "black") {
      ctx.fillStyle = "red";
    } else {
      ctx.fillStyle = "pink";
    }
    ctx.fill();
  }
});

<canvas id="myCanvas" width="400" height="400"></canvas>

It changes the color to pink on first click. It does not matter if instead of Color Names I use Hex Values or RGB (Red; #FF0000; rgb(255,0,0))

and the problem is? what do you expect? what behaviour? do you want it to change it to something else or a random color? — Chris G, Jan 05 '23 at 18:03
You would learn something by adding `console.log(ctx.fillStyle);` You would see why it does not equal `black`. — Wyck, Jan 05 '23 at 18:07
Does this answer your question? [How to compare colors in JavaScript?](https://stackoverflow.com/questions/9421208/how-to-compare-colors-in-javascript) — Alexei Levenkov, Jan 05 '23 at 18:22

score 0 · Answer 1 · answered Jan 05 '23 at 18:05

I works to me using HEX values:

<html>

  <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");

      var polygon = [
        [100, 100],
        [100, 200],
        [200, 200],
        [200, 100]
      ];

      // Draw the polygon
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.moveTo(polygon[0][0], polygon[0][1]);
      for (var i = 1; i < polygon.length; i++) {
        ctx.lineTo(polygon[i][0], polygon[i][1]);
      }
      ctx.closePath();
      ctx.fill();

      // Add event listener to change the color of the polygon when clicked
      canvas.addEventListener("click", function(event) {
        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;

        ctx.beginPath();
        ctx.moveTo(polygon[0][0], polygon[0][1]);
        for (var i = 1; i < polygon.length; i++) {
          ctx.lineTo(polygon[i][0], polygon[i][1]);
        }
        ctx.closePath();
        if (ctx.isPointInPath(x, y)) {
          if (ctx.fillStyle == "#ffc0cb") {
            ctx.fillStyle = "#ff0000";
          } else {
            ctx.fillStyle = "#ffc0cb";
          }
          ctx.fill();
        }
      });

    </script>
  </body>

</html>

score 0 · Answer 2 · answered Jan 05 '23 at 18:14

To do that I just created another variable and used it:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ctx_color = "black";

...

if (ctx.isPointInPath(x, y)) {
    console.log(ctx.fillStyle);
    if (ctx_color == "black") {
      ctx.fillStyle = "red";
      ctx_color = "red";
    } else {
      ctx.fillStyle = "pink";
      ctx_color = "pink";
    }
    ctx.fill();
  }

If you want to change your color by rgb u can check this link How do I write a RGB color value in JavaScript?

change the color of a polygon in javascript

2 Answers2