別のキャンバスの上にファブリックキャンバス

Question

ファブリックキャンバスを2つ並べる方法はありますか？私は両方のキャンバスを描くことができるようにしたいですが、キャンバストップにのみ私のラインが含まれていてほしいです。キャンバスボトムにはキャンバストップに描画できないラベルが付きます。

Crude image of what I'm trying to go for

私は、一緒に別の使用のCSSの最上部に1つずつ2つのキャンバスをレイヤーと考えていた：

<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> 

私のスクリプトは、ちょうど下のキャンバスをレンダリングします。この時点で、私がしたいのは、両方のキャンバスを表示することですが、キャンバスの上に私のラインを置くことだけです。

<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> 

Answer 1

私はstackoverflowのポストからCSSを使用して層を配置する方法の情報を共有したよう：https://stackoverflow.com/a/3008863/7132835あなたが同じロジックを実行する必要があり、それに加えて、あなたのファブリックキャンバス宣言に以下のコードを追加する必要があります。

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

あなたはなど、背景として追加のプロパティを追加することができます