Adding and deleting canvases by clicking buttons?

Question

I'm trying to make a comic-making web-application and I need to allow support for multiple canvases or "panels" as we put it. I want to be able to create/delete and if possible, duplicate canvases by clicking on their corresponding buttons. E.g, add canvas button adds a canvas, delete deletes a panel etc.

<button onclick='addPanel()'>Add another canvas</button>

addPanel() {
  // ...
}

I'm currently using Canvas and FabricJS but I'm willing to use a new library if it will help me achieve this.

You can get a better understanding of what I'm after with this image.

Answer 1

This should solve your question.

I know we can optimize it using only jQuery. Please do it.

var canvas = null; 
var CANVAS_LIST = {}; 
var pageId =0; 

function addPanels(el){
console.log(el.value); 
 for(let i = 0 ; i<el.value; i++){
  pageId= pageId+1; 
  addPage(pageId); 
 }
}

function copyPage(srcPageId){
pageId = pageId+1;
 addPage(pageId)
 CANVAS_LIST[pageId].clear(); 
 
  CANVAS_LIST[pageId].loadFromJSON(JSON.stringify( CANVAS_LIST[srcPageId]), function(){ CANVAS_LIST[pageId].renderAll()});
 
 CANVAS_LIST[pageId].renderAll(); 
}

function addPage(pageId){

var rmvButton = document.createElement("button"); 
  var div = document.createElement("div"); 
  div.id = "div_"+pageId; 

   var t = document.createTextNode("Remove");
  rmvButton.setAttribute("style","color:red;font-size:23px");
  rmvButton.appendChild(t);
  rmvButton.id = "btn_"+pageId;
  rmvButton.onclick = function () {
    let id = $(this).attr("id").replace('btn_',''); 
    CANVAS_LIST[id].dispose();
    $("#div_"+id).remove(); 
  }


var copybtn = document.createElement("button"); 
   t = document.createTextNode("Copy");
  copybtn.setAttribute("style","color:green;font-size:23px");
  copybtn.appendChild(t);
  copybtn.id = "btn_copy_"+pageId;
  copybtn.onclick = function () {
  let id = $(this).attr("id").replace('btn_copy_',''); 

  copyPage(id); 
}

  var canElement = document.createElement("canvas"); 
  canElement.width = 200; 
  canElement.height = 200; 
  canElement.id = "can_"+pageId;
  div.append(copybtn);
  div.append(rmvButton);
  div.append(canElement);
  
  $("#panel").append(div); 
  canvas = new fabric.Canvas(canElement);
  canvas.id ="can_"+pageId;
  CANVAS_LIST[pageId] =canvas; 

  selectedCanvas = CANVAS_LIST[pageId]; 
  selectedCanvas.add(new fabric.IText("Page "+pageId));
  selectedCanvas.renderAll();
}

$("#addPage").click(function(){
  pageId= pageId+1; 
  addPage(pageId); 
});

canvas{
border: black solid 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>

<input type="text" value="" placeholder="How many panels you want?" id="panelInput" onBlur="addPanels(this)"> 

<hr/>
<br/>
<input type="button" value="Add Page" id="addPage"> 

<div id="panel">

</div>