Переведите и поверните холст в цикле

Question

У меня проблемы с рендерингом нескольких блоков холста. Я должен нарисовать прямоугольник и внутри этого прямоугольника сделать повернутый текст против часовой стрелки. Он работает внутри 1-го блока, но каждый следующий приводит к странному поведению:

  function draw(data) {
    const canvas = document.getElementById("myCanvas");
    if (canvas.getContext) {

      function drawDashedLine(pattern, x1, x2, y1, y2, color) {
        ctx.beginPath();
        ctx.setLineDash(pattern);
        ctx.strokeStyle = color || "black";
        ctx.lineWidth = 4;
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
			}

      const drawTor = (x, y, datax) => {
        // PROD const assetnum = asset.ASSETSPEC.ASSETNUM;
        const assetname = "ASD";
        //const tor = /tor./gi.test(assetname);
        if(assetname){
          //const torname = assetname.slice(3);
          ctx.setLineDash([15, 4, 4, 4, 4, 4]);
          ctx.lineWidth = 3;
          ctx.strokeStyle = '#000';
          ctx.strokeRect(x, y, 60, 80);
          ctx.fillStyle = "black";
          ctx.font = "600 20px Arial";
          let text = ctx.measureText(assetname);
          ctx.save();
          ctx.translate(x+20,y+60+text.width/2);
          ctx.rotate(-0.5*Math.PI);
          ctx.fillText(assetname, x, y);
          ctx.restore();
        }
      }

      let c = {
        x: 20,
        y: 20
      };
      data = ["A", "V", "X"]
      let ctx = canvas.getContext("2d");
      data.forEach(element => {
        drawTor(c.x, c.y, element.ASSETNUM);
        c.y = c.y + 90;
      });
    } else {
      alert("canvas not supported");
    }
  }
  
  draw();

<div>
  <canvas id="myCanvas" width="200" height="280"></canvas>
</div>

Я считаю, что что-то не так с .save () и .restore (), но я не могу найти никакого решения для этого.

Answer 1

Возникла проблема с рендерингом текста:

Неправильно:

ctx.fillText(assetname, x, y);

Получается при перемещении и повороте. Я устанавливаю начальную точку рендеринга текста, поэтому задаю x, y other0,0 неверно.

Справа:

ctx.fillText(assetname, 0, 0);