On HTML Canvas, certain overlapping colors are creating unwanted shadows

[ennaido]

Hi,

I am playing with various colors on canvas and just noticed that certain overlapping colors (e.g. red on blue) create shadows, as shown in the image below:

If you notice, there’s about 0.5px wide shadow on the right side of the red circle.

I have the following code:

<canvas width="1000" height="1000"></canvas>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// BG
ctx.fillStyle = '#1c4c72'; ctx.fillRect(0, 0, 1000, 1000);

// Circle red
ctx.beginPath(); ctx.arc(500, 500, 250, 0, 2 * Math.PI); ctx.fillStyle = '#9a1500'; ctx.fill();

// Circle white
ctx.beginPath(); ctx.arc(500, 500, 150, 0, 2 * Math.PI); ctx.fillStyle = '#ffffff'; ctx.fill();

Is there a remedy for this or is this something to learn to live with? Thanks for any ideas.

[DaveMaxwell]

@ennaido

Is there a remedy for this or is this something to learn to live with? Thanks for any ideas.

Those are artifacts of those two colors together and how your eyes process the image. Change one of the two colors to something else and you’ll see the “shadow” will go away.

It has to do with complementary colors (the blue is a few shades darker than the red’s true complementary color), but I don’t understand the science behind it. Add in that blues are inherit in most shadows, and you get a double whammy of eye trickery…

[PaulOB]

@DaveMaxwell

but I don’t understand the science behind it.

Could be something to do with this or this from a previous query in the forums.

Mach bands

@ennaido

If you notice, there’s about 0.5px wide shadow on the right side of the red circle

If you enlarge the image in your paint package or use a color picker you will see that there is no shadow. It’s just an optical illusion.

[WebSteve]

Look at the image with one eye and see if the optical illusion goes away.

[ennaido]

Actually I tested it with closing each eye before I saw your comment. When I look with left eye, shadow exists but it is narrower. When I look with right eye, shadow exists and it is as thick as when both eyes are open.

[ennaido]

Thanks for the links, interesting reads. I am more inclined to think this is not Mach bands effect as it happens only with certain colors (certain red-blue, green-red tones). I guess my solution is to use slightly different colors, to get rid of the shadow. Because, compared to other color combinations in my design, these colors and the shadow they create stick out.

[ennaido]

Thank you very much for the tip about complementary colors. I will try moving one of the colors away from its complementary and see the range when the shadow disappears.

[PaulOB]

@ennaido

I am more inclined to think this is not Mach bands effect as it happens only with certain colors

Yes the Mach effect was for shades of gray but the gif shows it in action which was useful :).

It’s more or less the same effect for shades of red and blue as mentioned in my first link but here’s a quick codepen I knocked up where you can see the same effect with your colours.

Remember though that this is an optical illusion so not everyone will see the same so changing colours may fix it for you but not someone else.

[Shadi99]

i think HTMl is a complicated prosses

[ennaido]

Thanks for the visual example. It looks the effect is amplified when the two colors are overlapping (as in my case), i.e., not just touching. After Dave’s comment, I did a lot of testing with close-to-complementary colors and the shadow is the thickest for complementary colors regardless of what color it is.

I just changed my colors a bit and I will learn to live with the remaining shadow where it occurs.