HTML5 Холст цветовой дифференциации

Question

Я пытаюсь нарисовать всплывающее окно, используя HTML5 canvas.Всплывающее окно состоит из холста, который рисует стрелку и элемент ниже:

Как вы можете ясно видеть, цвет стрелки темнее, чем цвет фона элемента div.
Код вводится в каждую вкладку браузера, и при выделении текста отображается всплывающее окно.

Вот код для рисования:

    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();

и CSS элемента divis:

#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;   
}

Как видите, цвета одинаковы, но они отображаются по-разному.
Что я делаю не так?
Почему есть какие-либо различия?Я использую Webkit под Chrome 15.

Edit1

Я забыл упомянуть, всплывающее окно работает как вставленный javascript \ css .

Добавление исходного кода HTML:

 <div id='popupContainer'>
     <canvas id='popupCanvas' width='20' height='10'/>
     <div id='popupMenu'>
     </div>
 </div>

и полный 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

Вот мойВесь код по выбору пользователя:

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

Я бы посоветовал попытаться определить это как-то иначе, чем rgba, как возможное исправление, хотя это довольно странно.

С другой стороны, я бы рассмотрел использование псевдоэлемента (см. здесь для отличной статьи) для стрелки, кажется немного ненужным использовать целый элемент canvas для такойподробно.Хотя поддержка может быть не фантастической / непротиворечивой, как и для canvas, я бы сказал, что это хороший обмен.

Answer 2

Я не могу воспроизвести эту проблему. Можете ли вы предоставить полный код?

Я добавил скрипку ниже с чуть большим треугольником и использовал версии с пограничным радиусом и тенью от сторонних производителей с префиксом, чтобы она работала в IE9, Opera и Mozilla, а также в браузере webkit.

Я также добавил поле -5px к нижнему элементу div, чтобы вызвать наложение.

http://jsfiddle.net/thebeebs/tGzna/2/

Мне кажется, что цвет треугольника отлично смотрится во всех основных браузерах. Все, что я могу думать, это то, что CSS, который вы используете на картинке, отличается от CSS, который вы добавили в вопросе (что возможно, так как на вашем изображении есть черный фон с div-элементом), что-то на странице, на которой код Внедрение влияет на цвет или есть что-то под стрелкой, которая воздействует на альфа 0,9.

Я также добавил кое-что на задний план, чтобы посмотреть, по-разному ли это влияют на элементы Canvas и Div с альфа-фоном ... но, похоже, это не так.

Answer 3

Я полагаю, что это потому, что всплывающий фон просвечивает сквозь холст (который имеет альфа 0,9).С другой стороны, само всплывающее окно отображается на светлом фоне.

Попробуйте изменить альфа-значения, чтобы выяснить, является ли это причиной проблемы.