html5 文字不显示,在HTML5画布上看不到文字

我正在使用d3和roughjs绘制一些饼图。我绘制弧线，然后放一些文字，但文字不是“显示”。一旦页面加载，文本就会在屏幕上闪烁，然后它会被饼图覆盖。我寻找一些Z-索引，但我一直没能找到解决方案。我错了什么？在HTML5画布上看不到文字

调试时，我可以看到的地方也标签

下面的代码

var twData = [{"concept" : "macri", "sentiment" : [0.1, 0.9]},

{"concept" : "paritarias", "sentiment" : [0.2, 0.8]},

{"concept" : "churros", "sentiment" : [0.7, 0.3]}];

var canvas = document.querySelector("canvas"),

context = canvas.getContext("2d");

rough = new RoughCanvas(canvas, 960, 500);

context.translate(width/2, height/2);

context.textAlign = "center";

context.textBaseline = "middle";

context.fillStyle = "#000";

context.font="25px Verdana";

var width = canvas.width,

height = canvas.height,

radius = (Math.min(width, height)/2)/twData.length;

rough.hachureGap = 1;

rough.strokeWidth = 0.5;

rough.fillWeight = 1;

var colors = ["#009933", "#800000"];

var labelArc = d3.arc()

.outerRadius(radius - 40)

.innerRadius(radius - 40)

.context(context);

var dx = (width/2)/twData.length + 50;

dy = (height/2)/twData.length;

for(k=0;k

var pie = d3.pie()

.sort(null)

.value(function(d) { return d; });

// Arcs

var arcs = pie(twData[k].sentiment);

arcs.forEach(function(d, i) {

var a = rough.arc(dx*(k+1), dy, radius * 2, radius * 2, d.startAngle - Math.PI/2, d.endAngle - Math.PI/2, true);

a.fill = colors[i];

//a.hachureAngle = Math.random() * 360;

});

// Labels

arcs.forEach(function(d) {

var c = labelArc.centroid(d);

context.fillText(d.data, dx*(k+1)+c[0], dy+c[1]);

console.log("Agregando label " + d.data + " en (" + Math.round(dx*(k+1)+c[0]) + "," + Math.round(dy+c[1])+")");

});

context.fillText(twData[k].concept,dx*(k+1), dy+100)

console.log("Agregando label " + twData[k].concept + " en (" + Math.round(dx*(k+1)) + "," + Math.round(dy+100)+")");

} //for

谢谢！

2017-03-02

Vladimir