0

I am attempting to layer two canvases, so that one has a background image and the other can have a different image on it. When I layer them in, the width and height resets to the default 300x150px of a canvas instead of respecting the width/height I put in. The canvas with the id of 'c' is my top layer

Here is my HTML:

<div class="col-md-6">
            <div style="position:relative; border:1px solid">
                <canvas id="b" style="position:absolute; left:0; top:0; z-index:1; width:640px; height:429px;"></canvas>
                <canvas id="c" style="position:absolute; left:0; top:0; z-index:2; width:640px; height:429px;"></canvas>
</div>

I am using fabric.js to create the canvases as follows:

var canvasb = new fabric.Canvas('b');
canvasb.setBackgroundImage('imgs/mybackgroundimage.png', canvasb.renderAll.bind(canvasb));

var canvas = new fabric.Canvas('c');
Kode
  • 3,073
  • 18
  • 74
  • 140

1 Answers1

1

I'm not sure you can set the width and height inside the style section, why dont you try this way instead:

<canvas id="b" width="640" height="429" style="position:absolute; left:0; top:0; z-index:1;"></canvas>

(Reference: http://www.w3schools.com/html/html5_canvas.asp)

Also, this reference might be useful for the distinction between setting the size via attribute and CSS:

Size of HTML5 Canvas via CSS versus element attributes

Community
  • 1
  • 1
Roger
  • 1,053
  • 1
  • 8
  • 14
  • I tried this, but the instead of overlaying the canvases are stacking. Here is the current code:
    – Kode Sep 01 '15 at 16:33
  • It seems to work in its own page, but I am running bootstrap and wondering if there is a conflict on the page with bootstrap – Kode Sep 01 '15 at 16:43