Создание новых изменений холста холста canvas position

Question

Я пытаюсь узнать о fabricjs и заметил, что когда я создаю новый объект fabric.Canvas, он меняет положение моего холста.

HTML

<canvas id="c"></canvas> 

Css

#c { 
border: thin red solid; 
     position: absolute; 
     top: 50px; 
     left: 100px; 
} 

Javascript

var c = document.getElementById("c"); 
var ctx = c.getContext("2d"); 

var img = new Image(); 
img.src = 'cheese.jpg'; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
}; 

// applying the below line shifts the canvas element back to 0,0 position 
var cFabric = new fabric.Canvas('c'); 

Надеясь вы, ребята, знаете, что я делаю неправильно.

Answer 1

Вы не совершаете ничего плохого. Вызов конструктора fabric.Canvas на вашем собственном элементе canvas приведет к тому, что ваш собственный холст будет обернут div .canvas-container. Исходный холст получает добавленный класс .lower-canvas, а его стилиcss установлены на 0px. Другое тогда, что холст сиблинга добавляется ниже вашего оригинального холста, с классом upper-canvas. Эти две полотна действуют как слои, которыми управляют внутренние работы Fabric.js (magic: O).

Если вам нужно разместить и поместить свой холст, я рекомендую вам обернуть холст html оболочкой div.

<div id="canvas-wrapper"> 
    <canvas id="c"></canvas> 
</div> 

Следующая передача ваши правила CSS в обертке

#canvas-wrapper { 
    position: absolute; 
    top: 50px; 
    left: 100px; 
} 

Вот простой скрипку, что я сделал обновление @ образца скрипку Mullainathan в: https://jsfiddle.net/eo7vdg1t/1/