I was wondering If a square could be drawn in color #FF000000 then a circle inside of #00000000?

This would be as drawing a square with black pixels then drawing over a circle with transparent pixels.

As I understand hexadecimal colors basic are red, green, blue, but it looks like you can have a similar format as rgba but like argb in hex with 00 being totally transparent and FF being solid.

It makes sense as in a png when you can have transparent pixels that the alpha value should also translate to the hex as a legitimate and manipulative value.

Hex colors with 8 characters don't seem standard at all though (normally 6 long) as I have first seen them today on an android app and was wondering if they are (with want of better wording - please edit if unclear) legit.

Is this a legit color #00000000? It would be invisible but black where-as this would be as I understand solid black: #FF000000;

I was wondering If a square could be drawn in color #FF000000 then a circle inside of #00000000?

This would be as drawing a square with black pixels then drawing over a circle with transparent pixels.

As I understand hexadecimal colors basic are red, green, blue, but it looks like you can have a similar format as rgba but like argb in hex with 00 being totally transparent and FF being solid.

It makes sense as in a png when you can have transparent pixels that the alpha value should also translate to the hex as a legitimate and manipulative value.

Hex colors with 8 characters don't seem standard at all though (normally 6 long) as I have first seen them today on an android app and was wondering if they are (with want of better wording - please edit if unclear) legit.

Is this a legit color #00000000? It would be invisible but black where-as this would be as I understand solid black: #FF000000;

• javascript
• canvas
• hex

3 Answers 3

Update: Modern browsers now support 8 character hex colors, for CSS and canvas.

Canvas, like CSS, does not support 8 character hex colors. You can however use the rgba color syntax.

Working Example:

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');

ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 100, 100);

ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(50, 50, 100, 100);

<canvas id="canvas"></canvas>

You mentioned that you know hex colors can be broken up into r,g,b. one thing you could do would be to write a function that allows you to use 8-char hex codes:

function hex2rgba(hexa){
  var r = parseInt(hexa.slice(1,3), 16);
      g = parseInt(hexa.slice(3,5), 16);
      b = parseInt(hexa.slice(5,7), 16);
      a = parseInt(hexa.slice(7,9), 16)/255;
  return 'rgba('+r+', '+g+', '+b+', '+a+')';
}

ctx.fillStyle = hex2rgba('#aabbcc99');
//rgba(170, 187, 204, 0.59765625)

you can use

ctx.fillStlye = "#rrggbbaa"

but it looks like crap and i have this problem i call staining where if i put a tint with this on a color it will not actauly turn that color and will have a tint of the old color and its really annoying bc i want it to fade full black but it wont. it gets worse the ,lower the alpha is (i think alpha will only stack a few times) you should insted use

ctx.globalAlpha = 0.aa; //aa is in base 10 here! (its a scale from 1.0 to 0.0)