CODEWITHSUNDEEP
javascriptjquerycsscanvasfabricjs
anonymoose
anonymoose

Reputation: 1243

Objects seem to be appearing behind my canvas

I'm adding objects to my canvas with the fabricjs library (1.7.21) however I am getting this odd behavior where objects are appearing to be behind the canvas. The text is either displayed as white or behind the canvas and I'm not sure why or how. What am I missing here?

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.

Upvotes: 0

Views: 82

Answers (1)

Durga
Durga

Reputation: 15614

Remove background-color from css which applies to both upper and lower canvas. use this 

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

It will make lower canvas background 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>

Upvotes: 1

Related Questions