-1

I have a simple easel.js game, where I draw the background as:

b_color.graphics
   .beginFill('#563767') //this color is rendered lighter.
   .drawRect(0, 0, w, h);
   background = new createjs.Container();
   background.addChild(b_color);

Just drawing a rectangle with the same size as canvas size from 0,0. The thing is that when I preview my canvas the color is not #563767 is #603f72.

Can someone explain me why and how to fix this issue?

Hiero
  • 2,182
  • 7
  • 28
  • 47

1 Answers1

1

I'm assuming you are checking the color with Digital Color Meter or similar? Some (most?) browsers will apply color correction to canvases, such as gama correction, which will shift your display colors somewhat.

To be fair, that seems like a fairly large shift in your example. Do you maybe have an unusual color profile set up on your system?

I played with the demo you shared elsewhere: http://jsfiddle.net/en2jsbom/2/

And at least on my system, the canvas always matches the CSS color, and digital color meter always returns #ff0000 (Chrome, Safari, FireFox).

gskinner
  • 2,478
  • 11
  • 12
  • Sorry, the issue was with my Photoshop, seems that is showing the color lighter. Thanks for easeljs! – Hiero Oct 30 '15 at 11:02