Canvas fillText не рендеринг

Question

Пожалуйста, смотрите мой jsfiddle об этой проблеме

https://jsfiddle.net/gL4m2z6v/

Это калькулятор дробей на холсте, который должен показывать наибольший общий коэффициент между двумя дробями. Вам нужно будет развернуть окно просмотра в скрипке и снова запустить, чтобы увидеть правильно.

Соответствующий отрывок кода - см. Скрипку для полного

labelGCF: function(a, b){
    var b = a % b;
    if (b != 0) {
        console.log(a, window.innerWidth*0.8, winH50, textObj.fontSize);
        ctx.fillText(a, window.innerWidth*0.8, winH50, textObj.fontSize);
    } else {
        tableObj.labelGCF(b, a % b);
    }
}

// Exec
(function loop(){
    window.requestAnimationFrame(loop);
    // Draw Canvas Background
    c.width = canWidth;
    c.height = canHeight;
    ctx.fillStyle = "#fff";
    ctx.fillRect(0,0,canWidth,canHeight);
    // Draw Arrows
    arrowObj.draw(arrowObj[0]);
    arrowObj.draw(arrowObj[1]);
    arrowObj.draw(arrowObj[2]);
    arrowObj.draw(arrowObj[3]);
    coordsObj.arrows = 
    [arrowObj.getCoords(arrowObj[0]), arrowObj.getCoords(arrowObj[1]), arrowObj.getCoords(arrowObj[2]), arrowObj.getCoords(arrowObj[3])];
    // console.log("coordsObj.arrows: "+coordsObj.arrows);
    // Draw Table
    tableObj.draw();
    tableObj.labelXAxis();
    tableObj.labelYAxis();
    tableObj.labelTable();
    tableObj.drawGrid();
    tableObj.labelGCF(tableObj.xCount, tableObj.yCount);

})();

Этот код выглядит неправильно, и переменные выводятся правильно. Я не знаю, почему fillText не работает.

Answer 1

Я не могу в это поверить. Я закончил играть с координатами и понял, что fillText был белым. Я использую черный почти 90% кода. Часы прошли. Ах, радости программирования. Спасибо всем за вашу помощь.

Answer 2

Во-первых, убедитесь, что ваш fillText координаты находятся внутри холста. Икс 1536 может быть справа от холста. То же самое с 489,5.

Во-вторых, последний аргумент fillText максимальная ширина, которую холст будет использовать для отображения вашего текста. Любой текст, который не помещается в эту ширину, будет обрезан. Вы указываете textObj.fontSize (==48), который, кажется, не относится к максимальной ширине. Таким образом, вы можете оставить этот аргумент.

И... при желании вы можете центрировать текст по горизонтали и вертикали по указанному вами x, y, используя textAlign а также textBaseline:

// center text horizontally at [x,y]
ctx.textAlign='center';

// center text vertically at [x,y]
ctx.textBaseline='middle';

// draw your text (it will be centered at the specified x,y)
ctx.fillText('Centered Text', x,y );