HTML5 Canvas color differentiation - html

Question

I'm trying to draw a popup using HTML5 canvas.
The popup is composed of a canvas that draws an arrow and a div below:
As you can clearly see, the color of the arrow is darker than the div's background-color.
The code is injected into every tab of the browser and the popup is shown upon selection of text.
Here's the drawing code:
var ctx = $('#popupCanvas')[0].getContext("2d");
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fillStyle = "rgba(50,50,50,0.9)";
ctx.fill();
and the CSS of the div is :
#popupMenu
{
line-height: 0px;
display:block;
background-color:rgba(50,50,50,0.9);
color:#ddd;
-webkit-box-shadow: 2px 2px 5px #555;
-webkit-border-radius:5px;
font-family: Century Gothic, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size:0px;
padding:5px;
width:345px;
}
As you can see, the colors are the same and yet they are rendered differently.
What am I doing wrong?
Why are there any differences? I'm using Webkit under chrome 15.
Edit1
I forgot to mention, the popup is running as injected javascript\css.
Adding the HTML source code:
<div id='popupContainer'>
<canvas id='popupCanvas' width='20' height='10'/>
<div id='popupMenu'>
</div>
</div>
and the full CSS:
#popupCanvas
{
position:relative;
margin:0px;
padding:0px;
}
#popupContainer
{
position:absolute;
z-index: 999999;
direction:ltr;
text-align:center;
}
#popupMenu
{
line-height: 0px;
display:block;
background-color:rgba(50,50,50,0.9);
color:#ddd;
-webkit-box-shadow: 2px 2px 5px #555;
-webkit-border-radius:5px;
font-family: Century Gothic, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size:0px;
padding:5px;
width:345px;
}
Edit2
Here's my entire code upon user selection :
this.onTextSelected = function (selText) {
selectedText = selText;
// check if we have value
var selection = window.getSelection();
var node = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
if (node.value) {
rect = getTextBoundingRect(node, $(node).caret().start, $(node).caret().end);
}
else
rect = selection.getRangeAt(0).getBoundingClientRect();
var bottom = rect.bottom + document.body.scrollTop;
var left = rect.left + document.body.scrollLeft
$("#popupContainer").css('top', bottom);
// Div exceeds left side
if (left - $("#popupContainer").outerWidth() / 2 < 0) {
$("#popupContainer").css('left', left);
// TODO: set the arrow to be left
}
// Div exceeds right side
else if (left + $("#popupContainer").outerWidth() / 2 > $(window).width()) {
$("#popupContainer").css('left', left + rect.width - $("#popupContainer").outerWidth());
// TODO: set the arrow to be right
}
else {
$("#popupContainer").css('left', left + rect.width / 2 - $("#popupContainer").outerWidth() / 2);
}
$("#popupContainer").show();
var ctx = $('#popupCanvas')[0].getContext("2d");
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fillStyle = "rgba(50,50,50,0.9)";
ctx.fill();
};

Answer 1

I'd suggest trying to define it in something other than rgba as a potential fix, although it is quite strange.
On another point, i'd consider using a pseudo element (see here for a great article) for the arrow, it seems a bit unnecessary to use a whole canvas element for such a detail. Whilst support might not be fantastic/consistent, neither is that for canvas so I'd say it's likely a good swap.

Answer 2

I'd believe this is because pop-up background shines through canvas (which has alpha 0.9). On the othe hand, pop-up itself is drawn on light background.
Try modify alpha values to see if this is the cause of the problem.

Answer 3

I'm not able to reproduce this issue. Can you provide full code?
I added a fiddle below with a slighlty larger triangle and used un-vendor prefixed versions of border-radius and box shadow so that it works across IE9, Opera and Mozilla as well as webkit browser.
I also added a -5px margin to the bottom div to cause an overlap.
http://jsfiddle.net/thebeebs/tGzna/2/
The triangle colour looks fine across All major browsers to me. All I can think is that the CSS you are using in the picture differs from the CSS you have added in the question (which is possible since there is a black background to the div in your image), somthing on the page in which the code is embeded is effecting the color or there is something undernearth the arrow that is effecting the 0.9 alpha.
I also added something in the background to see if this effected Canvas elements and Div's with Alpha backgrounds differently... but it didn't seem to.