Erstellen neuer Stoff Leinwand ändert Canvas Position

Question

Ich versuche, über Fabricjs zu lernen und bemerkte, dass, wenn ich ein neues Fabric.Canvas Objekt erstellen ändert es die Position meiner Leinwand.

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'); 

euch Hoffnung, wissen, was ich falsch mache.

Answer 1

Sie machen nichts falsch. Wenn Sie den Fabric.Canvas-Konstruktor auf Ihrem nativen Canvas-Element aufrufen, wird Ihre native Canvas von einem .canvas-container div umschlossen. Der ursprüngliche Canvas erhält eine .lower-canvas Klasse und seine left, right CSS-Stile werden auf 0px gesetzt. Abgesehen davon wird eine untergeordnete Ebene mit einer Klasse von upper-canvas unterhalb der ursprünglichen Zeichenfläche hinzugefügt. Diese beiden Canvases verhalten sich wie Layer, die von den inneren Funktionen von Fabric.js (magic: O) verwaltet werden.

Wenn Sie Ihre Leinwand positionieren und stylen müssen, empfehle ich Ihnen, Ihre HTML-Leinwand mit einem Wrapper div zu verpacken.

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

Nächste Transfer Ihre CSS-Regeln an den Wrapper

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

Hier ist eine einfache Geige, die ich durch die Aktualisierung @ Mullainathan der Probe Geige gemacht: https://jsfiddle.net/eo7vdg1t/1/