Написать текст внутри прямоугольника ⇐ Html

[Anonymous]

Я пытаюсь найти способ заполнить текст внутри прямоугольника. К сожалению, я могу найти только проекты/учебники по C#.
Можно ли добавить текст внутри прямоугольника в HTML5 на холсте?
Я хочу, чтобы в каждом прямоугольнике (узле) был другой текст, например, 1 называется коровой, а другой - тигром и так далее. Возможно ли это? я перепробовал все!
var x = 150;
var y = 100;

var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');
ctx.font = "30px Arial";

canvas.height = 0;

var rects = [
[20, 20, x, y],
[20, 220, x, y],
[20, 420, x, y],
[20, 620, x, y],
[20, 820, x, y],
[20, 1020, x, y],
[20, 1220, x, y],
[20, 1420, x, y],
[20, 1620, x, y]
];

for (var i = 0; i < rects.length; i++) {
canvas.height = canvas.height + 200;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// redraw rectangles
for (var j = 0; j < i; j++) {
ctx.fillRect(rects[j][0],
rects[j][1],
rects[j][2],
rects[j][3]);
}
ctx.fillRect(rects[0],
rects[1],
rects[2],
rects[3]);
}

$('#NodeList').click(function (e) {
var x = e.offsetX,
y = e.offsetY;

for (var i = 0; i < rects.length; i++) {
if (x > rects[0] &&
x < rects[0] + rects[2] &&
y > rects[1] &&
y < rects[1] + rects[3]
) {
alert('Vierkant ' + i + ' clicked');
}
}
});