Javascript HTML5画布层到HTML/CSS代码

我有一个画布，我可以在上面添加多层文本和图像，我用它来制作模板。最后，我试图实现的是，当我添加一个层时，将创建一个包含该层属性的HTML/CSS块，这些属性是：

X Y 宽度 身高 字体 字号 字体颜色 角 所容纳之物 最后，我想实现的是，当我添加一个层时，将创建一个代码块，当我通过例如移动它来更改任何层属性时，代码也应该更改，当我更改代码时，层应该在画布上相应地更改

我找了很多像这样的东西，但什么也没找到。如果有人知道我怎么做，如果有可能的话，那就太好了

我的画布的工作示例可在此处找到： 如果你添加了一个图层后，它没有任何作用，请尝试刷新

代码的粘贴箱：

---

您使用了错误的技术。HTML5Canvas并没有记录您在DOM中添加的元素，它更像是一种“火与忘”技术。一旦你渲染了它，你就基本上失去了它

另一方面，如果您查看SVG，则每个SVG项都有一个DOM表示，您可以使用CSS清楚地看到、操作和设置样式。与尝试使用画布相比，分层SVG将是解决此问题更合适的方法

为了进行说明，下面是一些渲染画布圆的示例代码：

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
</script>

但是，生成的DOM看起来就像：

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

如果将其与SVG进行比较，则会得到DOM中的实际圆圈：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

---

为了解释，我会看看我能用这个做些什么。