fabric canvas on top of another canvas

Question

Is there a way to have two fabricJS canvases one top of each other? I want to be able to draw on both canvases, but I want my lines contained only on Canvas Top. Canvas Bottom will have labels that will not be able to be drawn on Canvas Top.

Crude image of what I'm trying to go for

I thought I could layer two canvases together, one on top of another using css:

<style>
.div {
    width: 1550px;
    height: 512px;
    border: solid 0px #4a7497;
    margin-top: -512px;
    margin-left: 100px;
    position: relative;
}
</style>

<canvas id="canvasBottom" width="1650" height="612"</canvas>
<canvas id="canvasTop" class="div" width="1550" height="512"></canvas>

My script just renders the bottom canvas. At this point, all i want to do is display both canvases but have my lines on canvas top.

<script type="text/javascript">
$( document ).ready(function() {
    var canvasBottom = new fabric.Canvas('canvasBottom', { selection: false, backgroundColor: 'black', targetFindTolerance: 20});
    var canvas = new fabric.Canvas('canvasTop', { selection: false, backgroundColor: 'white', targetFindTolerance: 20});

    canvas.setBackgroundImage('http://website/image/background.png', 
    canvas.renderAll.bind(canvas));

    var grid = 15;
    var d = document,
    ge = 'getElementById';

    //draws vertical lines
    for (var i = 1; i <= (<?php echo $yLines; ?>); i++) {
        canvas.add(new fabric.Line([ i * grid+100, 0, i * grid+100, 612],{stroke: 'yellow',strokeWidth: 1}));
    }

    canvas.renderAll();
    canvasBottom.renderAll();
});
</script>

I can stack the canvas divs on top of each other, but once i start drawing on them, the divs show up one above the other — Stoops, Aug 21 '17 at 18:49

score 0 · Answer 1 · answered Aug 21 '17 at 19:30

As I shared information how to put layers using CSS from stackoverflow post: https://stackoverflow.com/a/3008863/7132835 you need to do the same logic, but in addition you will need to add code below to your fabric canvas declaration:

var canvasBottom = new fabric.Canvas('layer1',{position: absolute});
var canvas = new fabric.Canvas('layer2',{position: absolute});

You can add additional properties as a background, etc.

fabric canvas on top of another canvas

1 Answers1

Linked