We Keep Coding

Draw an outline around a group of objects that surrounds the objects drawn area (not a bounding box)

I am trying to figure out a way to draw an outline around the area of a group of items as illustrated hopefully clearly in the sample image.
The idea is a user creates a bunch of rectangular objects always adjacent (vertically/horizontally), groups them together and then clicks a button to create the outline. I cannot figure out the outline part.
My only idea so far is to perhaps export the group to SVG and then manipulate it somehow (eg. add a thick border and use a clipPath to keep only the outer part of the border). Not even sure this idea is right because my SVG knowledge is kind of limited. Perhaps this can all be done in the context of fabricjs or with the help of an additional library?
(Using fabricjs 3.6.3)
Sample of outline around drawn area of objects
Scenario with group of objects where an object is in landscape position

Detemine all elements at a given point js

I am working on an API that use shapes (and irregular) shapes to build websites. My problem is where I can provide a div that can carry as a background to irregular shapes so .
However to do this I would need to know the max area the object is taking up by having the max height and width.
I am aware that element.getBoundingClientRect does this but my roadblock is that is does not consider any psuedo elements, which is how most of these shapes are made.
I know when working with the CSS transform property, especially using scale, the browser knows to resize the whole shape including the pseudo element that makes up the shape.
It also uses the border-box coordinate system.
However the browser does not provide this information as it comes from the user agent
My main question is how do I access the dimensions the user agent computes for any given element, or how do I find the proper dimensions of a 'getBoundingClientRect' that considers an elements psuedo classes
My shapes can be found in the attached links.
httpsmichaelodumosu57.github.iosigma-xi-mu
https://css-tricks.com/examples/ShapesOfCSS/
I can't afford to use any other method to create my shapes because I have limited time on the project, but I do know that the browser can provide me with the information I am looking for.

Yes I have answered my own question. What you want to do is to scale the image to a very small since (since transform scale() works perfectly) and place it in a grid box (this could be a div of small size as well. You would run document.elementsFromPoint(x, y)
(notice the pluralization) on every point in the div containing you shrunked irregular shape and from there you can find the height and width of its bounding box by the difference of the highest range of their respective coordinate values. To center you must place your irregular shape in the bounding box of the background drop with the re-scaled dimensions (remember your skrunked your irregular shape to find them) and have the margin of the inner shape set to zero. This works only if your real (not pseudo element) is to the left most of the screen. Question is how do you position your background when your irregular shape is not properrly centering inside of it?

You can use document.elementFromPoint(x, y) for getting the element that exists in specific point, but I have not tested it for any kind of shapes.

WebGL Marquee/Lasso Selection Tool

So I have a WebGL model viewer (one model made of lots of different objects), in which I have implemented a lasso/marquee selection box. That is, the user can click to drag a rectangle on the screen, and everything inside the rectangle gets selected. It selects not just visible objects, but everything in the model that is within the bounds of the rectangle.
I have to do this for 2 cases: partial and full selection.
Full Selection: only objects that are completely inside the rectangle will get selected.
Partial Selection: any object that has any overlap in the lasso rectangle, will get selected.
Now, I have full selection working just fine. The problem is with partial selection. Everything I've done is too slow. I don't have a spatial index/partition (octree or BVH, etc), so my next test is to create one to help more quickly cull out things that won't get selected.
In general, though, it seems at some point, I'm stuck with iterating through all the triangles of an object to see if any part of it overlaps with the lasso rectangle on screen. In some cases, this will be very slow if the lasso selection is dragged to be large enough, such that no objects get culled out, and all must be checked for intersection with the rectangle.
Right now, I'm doing all rectangle/triangle intersection tests in JS (various ways of checking for intersection of an object with the rectangle), and no test is happening in a shader.
So I'm not really looking for help to speed up what I currently have, I am wanting to know if there are known ways of doing this that are relatively fast even for large numbers of highly detailed objects (meshes)? I seemed to hit a wall, creatively, in thinking of a shader based approach.

Can two jcanvas layer masks exist on the same canvas?

Is it possible to create two layer independent layer masks on the same canvas? I've tried, without much success. I suspect it's due to masks affecting layer indexes.
I've highlighted this by enabling masking on mouseover (see here). If you mouseover a layer mask, the other layer masks disappears. If you draw the layer with mask:true as a property only one layer mask will appear. You might be thinking "why not make a separate canvas for each layer mask?" I can't because I intend on using $("canvas").getCanvasImage(); to render the canvas as a composite jpeg (which would be difficult with two canvases).
The end goal would be a canvas split vertically into two panes. Each pane would be filled with an draggable image. Users would move the image in the pane to "crop" it and then render the result as a composite image. This example comes close, but dragging the green box under the right pane creates a deadspace in that pane.
Thanks for you assistance.

Yes, it's now possible with jCanvas. Just be sure to call the restoreCanvas() method whenever you wish to restore a mask, like so:
$("canvas").restoreCanvas({
layer: true
});
Here's an example I made which uses two masks to split the canvas into two panes.

three.js drag multi objects

I made an 3D space with Three.js like in this example http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html
The next target is to enable user to select and drag/move multiple objects at a time.
I wonder if the enhancement of current implementation of the example can make it that way or I need a different implementation?
Thanks in advance.

You could use the bounding box of each object that you're selecting, then raycast a cube that matches that combined bounding box, move that big box and apply the position change to the selected objects.