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

Question

Я пытаюсь найти, как заполнить текст внутри прямоугольника. К сожалению, я могу найти только проекты 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); 
    //rectangles opnieuw tekenen 
    for (var j = 0; j < i; j++) { 
     ctx.fillRect(rects[j][0], 
     rects[j][1], 
     rects[j][2], 
     rects[j][3]); 
    } 
    ctx.fillRect(rects[i][0], 
    rects[i][1], 
    rects[i][2], 
    rects[i][3]); 

} 

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

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



enter code here 

Answer 1

Я надеюсь, что эта ссылка поможет вам ....

http://andreinc.net/2012/11/14/painting-and-wrapping-a-text-inside-a-rectangular-area-html5-canvas/