Canvas - Multiple pages

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<div class="ui top attached tabular menu">
  <a class="active item" data-tab="first">First<span><img id="canvas1thumb" /></span></a>
  <a class="item" data-tab="second">Second<span><img id="canvas2thumb" /></span></a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
    <canvas id="paper1" width="400" height="200" style="border:1px solid #ccc"></canvas>
</div>
<div class="ui bottom attached tab segment" data-tab="second">
    <canvas id="paper2" width="400" height="200" style="border:1px solid #ccc"></canvas>
</div>

SCSS

#paper {
  border: solid 1px red;
}
.item span img {
  height: 20px;
  border: solid 1px #ccc;
  margin-left: 20px;
}

JavaScript

const canvas = [new fabric.Canvas('paper1'), new fabric.Canvas('paper2')];

const red = new fabric.Rect({
  left: 10,
  top: 10,
  width: 150,
  height: 150,
  fill: 'red',
});

canvas[0].add(red);
canvas[0].renderAll();

const green = new fabric.Rect({
  left: 10,
  top: 10,
  width: 150,
  height: 150,
  fill: 'green',
});

canvas[1].add(green);
canvas[1].renderAll();

$('.menu .item').tab();

canvas.forEach((c, i)=>{
	const id = '#canvas' + (i+1) +'thumb'; 
	$(id).attr('src',c.toDataURL({format: 'png'}) );
  c.on('object:modified', ()=>{
  		$(id).attr('src',c.toDataURL({format: 'png'}) );
  })
});