Многослойные холсты HTML5 Высота/ширина Сброс до 300x150px

Question

Я пытаюсь сложить два холста, так что у вас есть фоновое изображение, а у другого может быть другое изображение. Когда я их накладываю, ширина и высота сбрасываются до 300x150px по умолчанию холста вместо того, чтобы уважать ширину/высоту, которую я вставлял. Холст с идентификатором 'c' - мой верхний слой

Вот мой 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> 

Я использую fabric.js создать холсты следующим образом:

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

var canvas = new fabric.Canvas('c'); 

Answer 1

Я не уверен, что вы можете установить ширину и высоту внутри секции стиль, почему не вы попробуйте вместо этого:

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

(Ссылка: http://www.w3schools.com/html/html5_canvas.asp)

Кроме того, эта ссылка может быть полезна для различения между настройкой размера с помощью атрибута и CSS:

Size of HTML5 Canvas via CSS versus element attributes