Write text inside rectangle

Question

I am trying to find how to filltext inside a rectangle. Unfortunately i can only find C# projects/tutorials. Is it possible to add text inside a rectangle in HTML5 in a canvas? I want each rectangle (node) to have a different text on it for example 1 is called cow and the other tiger and so on. Is this possible? i have tried everything!

 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

I know its really old question. But I ran into a similar so I decided to post the answer.

Note: You have to treat canvas differently that html tags like div. You get one ctx for canvas and you paint on it like a stream. Just change the position of your next elements and it would as expected.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();


context.rect(188, 50, 200, 100);
context.fillStyle = 'red';
context.shadowColor = '#999';
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
context.fillStyle = 'black';
context.font = '20px Courier';
context.shadowColor = 'transparent';
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fillText(`List item`, 200, 80);

context.lineWidth = 7;

<canvas id="myCanvas" width="578" height="200"></canvas>