# “Draw” rectangles around multiple other rectangles to achieve backdrop effect

Note: I will use the word overlay interchangeably with backdrop.

Note 2: This is a programming problem with CSS/Javascript. Each of these boxes have or can have width/height and top/left/right/bottom offsets in pixels. So those would be the values that can be calculated with.

I'm currently working on a guide mode and I highlight elements to make them stand out from the darker semi-transparent background.

So basically, I have one box that I want to not be overlaid/covered, and then I surround it with semi-transparent dark rectangles, simulating an overlay with an excluded element.

To do that, I simply do the following calculations:

Rectangle one (surround from top):

• Draw from the starting top position (top: 0)
• Draw from the starting left position (left: 0)
• Width is 100% of the container
• Height is the top offset of the box that I want excluded

Rectangle two (surround from left):

• The starting top position would be the offset of the box. (top: box's offset)
• Draw from the starting left position (left: 0)
• The width would be the left offset of the box. So basically from distance from the start of the container to the box itself.
• The height would be the height of the box

Rectangle three (surround from bottom):

• The starting top position would be: The box's offset + the box's height
• The left position would be again 0 (left: 0)
• Width is 100% of the container
• Height would be basically 100% below the point from where it's being drawn, so the remainder of the container.

Rectangle four (surround from right):

• The top would be again the top offset of the box
• The left position would be the box's left offset + the box's width (or we can simply take the box's right offset)
• The width would be 100% from the starting point and to the right until the container is filled up
• The height would be the box's height.

To illustrate this:

My solution works great for one highlighted box, but when that number becomes 2+, it becomes hard to calculate how to place the surrounding rectangles around those boxes. And the issue is: The boxes might need to be spread across the container, so the surrounding with boxes will vary a lot. There is no single static solution on my case.

So to illustrate my issue:

Here you can see the different boxes that need to be put into the page in order to surround Box1 and Box2 with the semi-transparent dark rectangles, basically simulating the overlay effect with highlighted elements. For one case like this one, I can hardcode the calculations and everything would be fine, but what if Box1 was higher up than Box2? Then what if they were not overlapping each other horizontally anymore? What if there is a Box3 that needs highlighting?

In either case, I wouldn't know how many dark boxes to place and where to place them.

Is there any mathematical formula that would help me in this case?

How would I approach this problem and make it extendable (multiple boxes, different positions)?

As noted above, this problem stems from a programming project. I tried to convert the programming terms and make them as generic as possible. If there is anything unclear, please let me know and I will clarify.

• In mathematical terms please define what is given and what is required. – Narasimham Mar 8 '17 at 11:42
• What's given: The position of the boxes in the container (x, y) and its dimensions (width, height). What is required: Where the surrounding rectangles should be placed (x, y) and their dimensions (width, height). – Aborted Mar 8 '17 at 12:19
• stackoverflow.com/questions/4344906/…. Why are you asking on math.SE instead of SO? – kennytm Mar 8 '17 at 13:55
• @kennytm Because the question involves mathematics? – Aborted Mar 8 '17 at 14:50