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

Layering Canvas elements

I'm working on a pototype HMTL5 canvas animation that will export to quicktime.
I'm having a dynamically generated background with dynamically masked elements on top of it.
I can get the background to be made, and have it export to the server as a frame by frame animation (png sequence) and then compile the animation using FFMPEG into a quicktime. The concept is working.
However, whenever I try to put the dynamically masked elements on top of the background, the background gets affected by the mask too.
Currently the draw opperation I have goes
Draw Background element 1
Draw Background element 2
Draw Foreground Element Mask
Switch to Source-in Mode
Draw Foreground element fill
Revert to Source-Over Mode
I'm obviously using the source mode wrong, but I'm not sure it is possible to do what I want (have a mask affect the element right under it, but not ones below that).
The easiest solution I can think of would be to just layer 2 canvas objects on top of eachother...however I'm not sure how I could combine the 2 canvases into a single image for the quicktime export.
Thanks for the help

The context.drawImage method will accept another canvas as the image source.
So if you want to "flatten" all your canvases into a single canvas:
yourMainContext.drawImage(yourOverlayCanvasElement,0,0);

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.

html5 canvas drawing mutiple images and overlapping

I draw mutiple images in canvas, but i want that the user be able to define the overlapping of the image. In other words, th user select the image that appears in the front, and the image that appears in behind.
how can i accomplished that?

Use "min-height" and "min-width" while creating the div for randering chart.

You can accomplish this, assuming you only care to render the next image to be on the canvas 'in front' or 'behind' the images which were already rendered (ie not to post-facto render an image 'between' two images you already rendered on the canvas) using the globalCompositeOperation property of the 2d canvas context. MDN has an illustrative example and comprehensive documentation. Basically, in your case if you want to render the next image 'above', you would use "source-over" as a value for this property, if you want to render it behind the existing content, use "destination-over".
If you want more detailed control over the overlap of more than 2 images, you will have to adjust the order in which they are rendered as suggested in the comments so far (ie put the images in an array, sort the array in the desired fashion, and then render them).

The image on top is always the last image drawn.
A solution I use when bringing an image to the front, when it's selected, is to store all the images in array - this will also be the draw order - and the image to be on top is simply taken out of the array and placed at the end, thus being on top.

Google Map Algorithm (Ajax, Tiles, etc)

I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.
By the way, this is a Javascript project.
I'm thinking of representing each tile as a square div with the image loaded as a background image.
My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?
Thanks!

About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.
About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.
About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).
About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.
Some further reference:
Tile5: Tiling Interfaces
gTile: Javascript tile based game engine
Experiments in rendering a Tiled Map in javascript/html…

There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.
To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.
If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.
But, again, if this is real work, don't implement it yourself. There's no reason to.