Drawing random rectangles on the parent rectangle as in the image using canvas

Question

I have parent rectangle and i want to add upto 10 or less rectangles on the right hand side corner of the parent rectangle as in the image

I wrote a code to do so but it is not aligned centre from the parent rectangle

this.addPortsToTheTransponder(3);

addPortsToTheTransponder(noOfPortsToBeDrawn: number) {
    for (let i = 1; i <= noOfPortsToBeDrawn; i++) {
      this.createPorts(i, noOfPortsToBeDrawn);
    }
  }
  /**
   *
   * @param i number to create ports
   */
  createPorts(i: number, noOfPortsToBeDrawn: number): void {
    this.context.clearRect(0, 0, this.width, this.height);
    /**
     * Size(height & width) of each port is calculated as follows,
     * A. transpondser size is divided with number of ports to be drawn
     * B. And divide the height and width by number of ports to be drawn
     */
    const length = this.sizeOfTransponder.height / noOfPortsToBeDrawn;
    const height = 10;
    const width = 10;
    /**
     * x is the total of this.x(where this.x is the x value of first transponder)
     * and width of transponder width
     */
    const x = this.x + this.sizeOfTransponder.width;
    /**
     * y is the total of this.y (where this.y is position where all objects drawn) 
     * and nth of ports * length
     */
    const  y = this.y + i * length - length / 2;
    /**
     *
     */
    this.context.rect(
      x,
      y,
      height,
      width
      );
    this.context.stroke();
  }

How can i align the small rectangles always drawn from the centre irrespective of the total number of the small rectangles? Here is the code

Answer 1

There's just a little math involved. Let's say your big rectangle is at x=20,y=20 and it's width=200 and the height=300.

Now you want to draw 5 smaller rectangles to it's right side.

With this in mind you know that maximum vertical space for the 5 small rectangles is the height of the big retangle - 300 - so let's divide 300 by 5 to get 60. If you simply start to draw small rectangle every 60 pixels starting with the y position of the big rectangle, the small rectangles would be aligned to the top. The trick here is to add half of the calculated 60 - 30 - and subtract half the height of a small rectangle to get it's center.

Here's an example - you can play with the variable numberOfRectangles to see it will always be centered to the side of the big rectangle:

 var bigRectangle = { x: 0, y: 0, width: 200, height: 400 }; var smallRectangle = { width: 20, height: 35 }; var numberOfRectangles = 6; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.rect(bigRectangle.x, bigRectangle.y, bigRectangle.width, bigRectangle.height) context.stroke(); for (var a = 0; a < numberOfRectangles; a++) { context.rect(bigRectangle.x + bigRectangle.width, bigRectangle.y + (bigRectangle.height / numberOfRectangles) * (a + .5) - smallRectangle.height / 2, smallRectangle.width, smallRectangle.height) context.stroke(); } 

 <canvas id="canvas" width=300 height=500></canvas> 

The implementation for your code varies sligthly because your loop starts at 1

 for (let i = 1; i <= noOfPortsToBeDrawn; i++) {

but basically you just have to subtract the calculated height instead of adding it so just replace this line

const  y = this.y + i * length - length / 2;

by

const  y = this.y + length * (i - 0.5) - height/2;