Нарисуйте текст холста за пределами прямоугольника по краям

Question

Я пытаюсь написать описание каждого ребра вдоль прямоугольника. Причина в том, чтобы описать длину каждого ребра внутри и снаружи прямоугольников (рядом). Есть ли способ, которым я могу этого достичь?

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);

Это должно показать 200 выше верхнего края (снаружи) и 150 вдоль левого края (снаружи)

Answer 1

Используя комментарий @ stealththeninja (указывающий на этот ответ - текст в html canvas ) и этот jsfiddle (для поворота текста), я смог создать приведенный ниже код.Надеюсь, что это вписывается в ваши спецификации.

Снимок экрана с приложенным результатом.

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    const rectPosX = 50;
    const rectPosY = 50;
    const rectLength = 200;
    const rectHeight = 150;

    ctx.fillStyle = "red";
    ctx.fillRect(rectPosX, rectPosY, rectLength, rectHeight);

    ctx.fillStyle = "blue";
    ctx.fillText('200', rectPosX + rectLength / 2, rectPosY);
    ctx.fillText('150', rectPosX, rectPosY + rectHeight / 2);
    ctx.fillText('200', rectPosX  + rectLength / 2, rectPosY + rectHeight);

    ctx.save();
    ctx.translate(rectPosX + rectLength, rectPosY + rectHeight / 2);
    ctx.rotate(0.5*Math.PI);
    ctx.fillText('150', 0, 0);
    ctx.restore();

<canvas id="myCanvas" width="400" height="300"></canvas>