物体似乎出现在我的画布后面

Question

我正在使用fabricjs库（1.7.21）向我的画布添加对象但是我得到了这种奇怪的行为，其中对象看起来在画布后面。文本显示为白色或在画布后面，我不知道为什么或如何。我在这里错过了什么？

var canvas = this.__canvas = new fabric.Canvas('canvas');

responsive();
window.addEventListener('resize', responsive);

function responsive() {
  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
  var widthn = width - 10;
  var heightn = height - 10;
  canvas.setDimensions({
    width: widthn,
    height: heightn
  });
}

function clearcan() {
  var txt;
  if (confirm("Chuck this?")) {
  console.log(canvas)
    canvas.clear().renderAll();
    newleft = 0;
  }
}

// Add Text
function Addtext() {
  var text = new fabric.IText("Tape & Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  canvas.setActiveObject(text);
  text.enterEditing();
  text.selectAll();
  text.renderCursorOrSelection(); // or canvas.renderAll();
}

body {
  background-color: #303030;
  color: white;
}

canvas {
  border-radius: 3px;
  border: 1px solid #3030;
  margin: 5px;
  background-color: white;
}

.btn {
  background-color: #3030;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">

  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
      <button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
      
    </div>
    
  </div>
</div>
<canvas id="canvas"></canvas>

Here's my JSFiddle。

Answer 1

从css中删除背景颜色，适用于上部和下部画布。用这个

var canvas = this.__canvas = new fabric.Canvas('canvas',{
 backgroundColor:'white'
});

它会使较低的画布背景变白。

DEMO

var canvas = this.__canvas = new fabric.Canvas('canvas',{
 backgroundColor:'white'
});

responsive();
window.addEventListener('resize', responsive);

function responsive() {
  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
  var widthn = width - 10;
  var heightn = height - 10;
  canvas.setDimensions({
    width: widthn,
    height: heightn
  });
}

function clearcan() {
  var txt;
  if (confirm("Chuck this?")) {
  console.log(canvas)
    canvas.clear().renderAll();
    newleft = 0;
  }
}

// Add Text
function Addtext() {
  var text = new fabric.IText("Tape & Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  canvas.setActiveObject(text);
  text.enterEditing();
  text.selectAll();
  text.renderCursorOrSelection(); // or canvas.renderAll();
}

body {
  background-color: #303030;
  color: white;
}

canvas {
  border-radius: 3px;
  border: 1px solid #3030;
  margin: 5px;
  //background-color: white;
}

.btn {
  background-color: #3030;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">

  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
      <button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
      
    </div>
    
  </div>
</div>
<canvas id="canvas"></canvas>