CODEWITHSUNDEEP
javascripthtmlgoogle-chromecanvas
Ryan Peschel
Ryan Peschel

Reputation: 11848

Javascript canvas is not filling in with the correct color?

I must be doing something very dumb, because I am very confused over what's going on. I am simply filling in a rectangle with a specified color, like this:

const c = document.querySelector("canvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "#D53F2E";
ctx.fillRect(0, 0, 150, 150);
.example {
    height: 4em;
    background-color: #D53F2E;
}
<div>The canvas:</div>
<canvas></canvas>
<div>A div using the same color:</div>
<div class="example"></div>

As you can see, I am specifying the fill color to be #D53F2E. However, the rectangle (on my screen at least), appears to be filled with #C04F34.

The colors don't match! However, I just thought to check Firefox, and they do match there. Was there a regression in the latest Chrome or something? I'm just using the latest Chrome and Windows 10, with uBlock Origin. Is there a flag I should be setting somewhere to ensure the colors match exactly?

Upvotes: 1

Views: 418

Answers (1)

Ryan Peschel
Ryan Peschel

Reputation: 11848

While typing this question, I thought to check Firefox vs Chrome, and noticed the colors matched in Firefox. This lead me to google "inaccurate colors Chrome" and found a comment online with this solution:

  1. Navigate to chrome://flags

  2. Search for color profile

  3. Find the option Force color profile

  4. Change it from Default to sRGB

This fixed the issue for me. Chrome now renders the specified color.

I think the issue occurred because my monitor uses the "Cool" color setting, and Chrome adopted this from my monitor settings. This overrides that and renders the actual color, instead of using the color profiled one.

Upvotes: 2

Related Questions