Question

The following draws text into a canvas image, into a top line and a bottom line. The issue is that stroketext() make weird polygon shapes come out of the text. Both filltext() and stroketext() need to be use so that the text can be white with a black border, which will be visible on any image irrespective of its background colour. Is there any way to remove the polygons?

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

Answer 1

Calling only fillText() doesn’t show the “weird polygon shapes” but adding a call to strokeText() does? Are the characters in the text string all present in the “Arial _px Bold” font – i.e., are there embedded newline or tab or other characters for which Arial would normally show a box? Obviously I haven’t tried your code, but these are questions I came up with to perhaps help a bit.