How to get Canvas to render in 8 bit color and store 8bit color values?

[Daniel Berger]

If I feed it an 8 bit color it will convert it to 24 bit which i don't want.

[mucaho]

Hi

Could you show a code example, and also describe what the example is actually displaying, and what you actually expected to be displayed?
As far as I know, there is no way to directly draw 8 bit colors on Canvas.

How are the red green blue channels given in the 8 bit color? Wikipedia says:

Bit  7 6 5 4 3 2 1 0
Data R R R G G G B B

Maybe it would be a matter of scaling those values to the RGB spectrum? Untested code:
// old is your old 8 bit color value
var oldB = old & 0x03;
var oldG = old & 0x1C;
var oldR = old & 0xE0;

/*
Scale a value from an old value range to a new value range.
see http://stackoverflow.com/a/5295202/3041008

let oldValue in [min, max]
let newValue in [a, b]

       (b-a)(x - min)
f(x) = -------------- + a
         max - min
*/
var oldToNew = function(x, max, b) {
 return b*x/max;
};

// new is your new 24 bit color value
var newB = oldToNew(oldB, Math.pow(2, 2), Math.pow(2, 8));
var newG = oldToNew(oldG, Math.pow(2, 3), Math.pow(2, 8));
var newR = oldToNew(oldR, Math.pow(2, 3), Math.pow(2, 8));

var c = Crafty.e("2D, DOM, Color")
 .color(newR, newG, newB);


Hope that helps.

[mucaho]

Ah, yes one more thing: The output maybe decimal, so the color values should probably be converted to an integer.

// new is your new 24 bit color value

var newB = oldToNew(oldB, Math.pow(2, 2), Math.pow(2, 8)) | 0;
var newG = oldToNew(oldG, Math.pow(2, 3), Math.pow(2, 8)) | 0;
var newR = oldToNew(oldR, Math.pow(2, 3), Math.pow(2, 8)) | 0;

[starwed]

It's a little unclear what you're asking for (are you using sprites, or trying to specify an option on the Colour object?) but two additional tips:

- Anti-aliasing is on by default, and could add additional colours in.  You can turn it off using the Crafty.pixelart method: http://craftyjs.com/api/Crafty-pixelart.html
- When using WebGL on the develop branch, you could actually define a replacement fragment shader that will translate images to the set of colors you want (as described here: http://gamedev.stackexchange.com/a/119825/26973).  This is a bit more advanced, but could allow some interesting effects.

[Daniel Berger]

So there is Canvas will only accept 8bit values? I tying to render per pixel and having 24 bits per pixel is too high to exist in memory 8bit should render 2^16 times faster than 24 bit I don't ever want a 24 bit value I was just wondering if there was a setting on crafty like how display on the screen can be set to 8 bit. So that crafty would run in 8 bit mode for display.

[Daniel Berger]

If I use Sprites From an 8 bit image does it upconvert it to 24bit?

[mucaho]

I don't think you should worry about color bit depth too much, as I am not aware of any browsers that internally work with anything other than the standard 24 bit color representation.
I'm not too knowledgeable in this area though.
The best way to reduce asset file size is to use jpg images, but they can look bad, so you generally use png images.