Fabric.js verandert mijn canvasformaat in 300×150 na initialisatie

HTML:

 <div class="canvas-wrapper">
    <canvas id="myCanvas"></canvas>
  </div>

CSS

.canvas-wrapper {
    width: 900px;
    min-height: 600px;
 }
 #myCanvas{
     border:1px solid red;
     position: absolute;
     top:22px;
     left:0px;
     height: 100%;
     width: 99%;
 }

JS

var myCanvas = new fabric.Canvas('myCanvas');

Mijn canvas wordt verkleind tot 300×150 nadat het is geïnitialiseerd, waarom?

Antwoord 1, autoriteit 100%

in de nieuwste versie moet je zoiets doen als:

var canvas = new fabric.Canvas('myCanvas');
canvas.setHeight(500);
canvas.setWidth(800);

…. Uw code ….

canvas.renderAll();

Werkt prima voor mij..

Voor dynamisch veranderende grootte werkt dit ook

Antwoord 2, autoriteit 33%

Bij het initialiseren van canvas leest Fabric de breedte-/hoogtekenmerken van het canvaselement of neemt de breedte/hoogte die is doorgegeven in opties.

var myCanvas = new fabric.Canvas('myCanvas', { width: 900, height: 600 });

of:

<canvas width="900" height="600"></canvas>
...
var myCanvas = new fabric.Canvas('myCanvas');

Antwoord 3

Een echt antwoord op deze vraag – zonder een nieuwe statische grootte, maar daadwerkelijk toelaten van CSS om effectief te zijn – is een van de volgende opties:

1. In CSS kun je individuele eigenschappen overschrijven en ze volgen met !important; het nadeel hiervan is dat eventuele verdere definities ook !important moeten gebruiken, anders worden ze genegeerd:

[width], [height], [style]
{
  width:      100vw!important;
  min-height: 100vh!important;
}

2. Met JQuery kun je de inline eigenschapswaarden instellen op een lege string. Waarschijnlijk kun je dit zonder JQuery bereiken, maar dat laat ik als oefening aan jou over.

Javascript (JQuery):

$('[style]').attr(  'style',  function(index, style){  return ''; });
$('[height]').attr( 'height', function(index, height){ return ''; });
$('[width]').attr(  'width',  function(index, height){ return ''; });

CSS:

*, *:before, *:after
{
  box-sizing: border-box;
}
body
{
  width:      100vw; 
  min-height: 100vh;
  padding:    0;
  margin:     0;
}
.canvas-container,
canvas
{
  width:      inherit; 
  min-height: inherit;
}
canvas.lower-canvas
{
  position: absolute;
  top:      0;
}

Daarna wordt CSS toegepast zoals verwacht.

Het is blijkbaar ook nodig om Fabric over de wijziging te vertellen:

function sizeCanvas()
{
  var width  = Math.max(document.documentElement.clientWidth,  window.innerWidth  || 0);
  var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  canvas.setHeight( height )
  canvas.setWidth( width )
}
window.addEventListener('resize', draw, false);
function initDraw()
{
  // setup
}
function draw()
{  
  canvas.renderAll();  
}
sizeCanvas();
initDraw();

Hiermee wordt Fabric geconfigureerd voor de viewport-grootte en blijft de grootte dienovereenkomstig als de grootte wordt gewijzigd.

Het is vermeldenswaard dat dit probleem zich om twee redenen voordoet:

1. Iemand dacht dat het een goed idee was om inline-stijlen te gebruiken en moest streng worden gestraft, aangezien er geen situatie is waarin dit ooit een geschikte praktijk is.

2. Stof verandert de DOM-indeling en nestt het originele canvas in een nieuwe div met een tweede genest canvas, wat voor verrassingen kan zorgen.