Почему первая строка первой текстовой строки не видна на холсте HTML5 в следующем примере?

Question

Я хочу использовать холст для отображения текстового поля 40x25.

В примере кода я использую шрифт 8px и отображаю букву «A» в каждой текстовой позиции.Строка первого пикселя первой строки символов не отображается.Когда я запускаю первый цикл при y = 1, проблема, кажется, решена, но координаты canvas начинаются с 0,0.

почему это происходит?

var c = document.getElementById("screen");
var ctx = c.getContext("2d");
ctx.font = "8px monospace";
ctx.textBaseline = "top";
for (y = 0; y < 200; y = y + 8) {
 for (x = 0; x < 320; x = x + 8) {
   ctx.fillText("A", x, y)
  }
}

<canvas id="screen" width="320" height="200"></canvas>

Answer 1

Чтобы ответить из комментариев, это похоже на проблему с используемым шрифтом - кажется, что он рисует выше «верхней» базовой линии (см. Ниже).

Вот немного измененная версия фрагмента, в которой не отображается проблема с использованием Courier New в качестве моноширинного шрифта по умолчанию в настройках браузера.

"use strict";
var c = document.getElementById("screen");
var ctx = c.getContext("2d");
ctx.font = "8px monospace";
ctx.textBaseline = "top";
var charCode = "A".charCodeAt(0);
for (var y = 0; y < 200; y = y + 8, ++ charCode) {
 var char = String.fromCharCode( charCode);
 for (var x = 0; x < 320; x = x + 8) {
   ctx.fillText(char, x, y)
  }
}

canvas {border: 1px solid red;}

<canvas id="screen" width="320" height="200"></canvas>

---

(обновление)

Установка значения свойства baseLine контекста в"top" устанавливает базовую линию на вершину квадрата "em" ( ссылка MDN );

Это изображение из этого вопроса о Tex демонстрирует, что это можетсреднее значение для рисования глифов шрифта

Источник

Если шрифт нарисован выше верхней части квадрата emэта часть глифа не будет отображаться в первой линии, нарисованной на холсте.Рисунок также подразумевает, что шрифты могут иметь верхнюю ограничительную линию над полем em.

Это, похоже, относится к шрифту, используемому в системе Ubuntu.Обратите внимание, что «monospace» - это не специфическое семейство шрифтов, а не шрифт.Вы можете найти фактический используемый шрифт, введя «monospace» в поле поиска на странице настроек Firefox и нажав кнопку «Дополнительно», представленную под шрифтами и цветами.

Answer 2

Итак, как вы сказали, холст начинается в 0,0 от верхнего левого угла.Однако 0,0 - это тот самый угол, где начинается холст, поэтому текст не будет виден с этой координатой.Если вы посчитаете свои А, у вас будет одно короткое замыкание как по оси х, так и по оси у.Подумайте, если бы вы заполнили это цветом, начиная с 0,0, вы бы пришли из самого верха левого угла.Чтобы показать все свои A, вы должны начать с координаты 1,1.