放置在画布上时，为什么文本渲染得如此糟糕？

Question

我有h1和a位于canvas元素上方。最终看起来像这样：

（请注意文字周围的奇怪黑框）

如果相关，则此文本是鼠标悬停淡入/淡出的叠加层的一部分（使用css :hover处理）。我认为代码非常简单，正是您所期望的，但如果答案不明显，我很乐意发布。

编辑：Chrome相关？它实际上在Safari上看起来很好

有什么想法吗？

编辑：相关代码（我认为）：

<div class="col-sm-6">
  <canvas class="preview-canvas">
  </canvas>
  <div class="rollover-overlay">
    <h1 class="game-title">NAME</h1>
    <a class="play-button">play</a>
  </div>
</div>

-

.col-sm-6 {
    position: relative;
}

.rollover-overlay {
    /* width and height set dynamically */
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 15;
    text-align: center;
    transition: background-color 300ms;
}

.game-title {
    opacity: 0;
    transition: opacity 300ms;
}

a.play-button {
    opacity: 0;
    background-color:transparent;
    transition: opacity 300ms, color 100ms, border-color 100ms;
}

.rollover-overlay:hover {
    background-color: rgba(0, 0, 0, .5);
}

.rollover-overlay:hover .game-title, 
.rollover-overlay:hover a.play-button {
    opacity: 1;
}

-