Stack

by butterfreeDay

HTML

<h1>Stack example</h1>
<div id = "canvas">
  <svg id = "svg_area" xmlns="http://www.w3.org/2000/svg"
            width="600" height="400">
  </svg>
</div>

JavaScript

class Rectangle {
  constructor(width, height, x, y, label) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.label = label;
  }
  toString() {
    return this.width + "," + this.height;
  }
  toSVG() {
    const svgNS = "http://www.w3.org/2000/svg";
    let svg = document.createElementNS(svgNS, "svg");
    svg.setAttribute("id", this.id);
    svg.setAttribute("x", this.x);
    svg.setAttribute("y", this.y);
    let rect = document.createElementNS(svgNS, "rect");
    rect.setAttribute("x", 2);
    rect.setAttribute("y", 2);
    rect.setAttribute("width", this.width);
    rect.setAttribute("height", this.height);
    rect.setAttribute("style","fill: white; stroke: black; stroke-width: 4");
    svg.appendChild(rect);
    let text = document.createElementNS(svgNS, "text");
    text.setAttribute("x",this.width/2 + 2);
    text.setAttribute("y",this.height/2 + 7);
    text.setAttribute("text-anchor","middle");
    text.appendChild(document.createTextNode(this.label));
    svg.appendChild(text);
    return svg;
  }
}

function init() {
  const svg_area = document.getElementById("svg_area");
  for (let i = 0; i < 3; i++) {
     let rect = new Rectangle(50,30,20,(i*40 + 10),"" + (i*40 + 10));
     svg_area.appendChild(rect.toSVG());
  }
  console.log("hello");
}
document.addEventListener('DOMContentLoaded', init);