同一画布上可以存在两个jcanvas图层蒙版吗？

Question

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.

Answer 1

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.