如何从画布中的filltext()中删除文本多边形

下面的代码将文本绘制到画布图像中，分为顶行和底行。问题是，stroketext()使奇怪的多边形形状出来的文本。filltext()和stroketext()都需要使用，这样文本就可以是白色的，黑色的边框，这将在任何图像上可见，而不管它的背景颜色。有什么方法可以移除这些多边形吗?

drawText = function(context, pos, text) {
    var fontSize = 100;
    while(1) {
        context.font = "bold " + fontSize + "px Arial";
        if( (context.measureText(text).width < (width-15)) && (fontSize < height/10) ) {
            break;
        }
        fontSize-=2;
    }
    var y;
    if(pos == "top")
        y = fontSize + 15;
    else if(pos == "bottom") {
        y = height - 15;
    }
    context.strokeText(text, width/2, y);
    context.fillText(text, width/2, y); 
}
updateList = function(doc, where) {
    if(where == "top")
        $("#list").prepend(makeCanvas(doc));
    else {
        $("#list").append(makeCanvas(doc));
    }
    var canvas = document.getElementById(doc._id);
    var context = canvas.getContext("2d");
    context.textAlign = "center";
    context.fillStyle = "#fff";
    context.strokeStyle = "#000";
    context.lineWidth = 6;
    var img = new Image();
    img.src = getTemplateLink(doc.name);
    img.onload = function() {
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        drawText(context, "top", doc.text.line1);
        drawText(context, "bottom", doc.text.line2);
    };
}