painting on pdf version 4

add more canvas

by otorineko6790

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.6.416/pdf.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="pdf-container"></div>
<div class="container">
  <div id="buttons">
    <input type="button" id="reset" value="Reset" />
    <div id='red' class="color"></div>
    <div id='blue' class="color"></div>
    <div id='black' class="color"></div>
    <div id='white' class="color"></div>
    <div id='yellow' class="color"></div>
    <button id="previous">previous</button>
    <button id="next">next</button>
    <button id="save">save</button>
  </div>
</div>

CSS

body {
  background-color: #ebebeb;
  cursor: crosshair;
}

#buttons {
  position: absolute;
  top: 5px;
  left: 10px;
}

#reset {
  margin-top: 10px;
  margin-left: 5px;
  float: left;
}

#previous {
  margin-top: 10px;
  margin-left: 5px;
  float: left;
}

#next {
  margin-top: 10px;
  margin-left: 5px;
  float: left;
}

#save {
  margin-top: 10px;
  margin-left: 5px;
  float: left;
}

.color {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 10px;
  margin-left: 5px;
  cursor: pointer;
  border: 1px solid #000;
  text-align: center;
}

#red {
  background-color: red;
}

#blue {
  background-color: blue;
}

#yellow {
  background-color: yellow;
}

#black {
  background-color: black;
}

#white {
  background-color: white;
}

JavaScript

var url = 'https://cdn.rawgit.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf';
var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d'),
  pageNum = 1,
  maxPage;
var pic = [],
  picc = [];
//////////////////////////////////////////////
//***************************  main
//////////////////////////////////////////////
showPage();
//////////////////////////////////////////////
//***************************  end of main
//////////////////////////////////////////////

////****buttons
$("#previous").on('click', function() {
  //alert(pageNum);
  if (pageNum > 1) {
    pageNum--;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    showPage();
  }
});

$("#next").on('click', function() {
  //alert(pageNum);
  if (pageNum < maxPage) {
    pageNum++;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    showPage();
  }
});

$("#reset").on('click', function() {
  rt();
});

$("#save").on('click', function() {
  //pic[pageNum] = canvas;
  //pic[pageNum] = new Image();
  //pic[pageNum].src = canvas.toDataURL("image/jpeg", 1.0);
  //let pdf = new jsPDF();
  //pdf.addImage(pic[pageNum], 'JPEG', 0, 0);
  //pdf.save("download.pdf");
});

function rt(){
	if(!pic[pageNum]){
    alert('no save data');
  	showPage();
   }
  else {
  	alert('saved');
    //canvas = pic[pageNum];
    ctx.drawImage(pic[pageNum]);
    showPage();
  }	
}

//var canvas = document.createElement('canvas'),
 // ctx = canvas.getContext('2d'),

////****show pdf page function
function showPage() {
  PDFJS.getDocument(url).then(function(pdf) {
    maxPage = pdf.numPages;
    pdf.getPage(pageNum).then(function(page) {
      // you can now use *page* here
      var viewport = page.getViewport(1);

      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      
      var obj = document.createElement('canvas'),
       octx = obj.getContext('2d');
       obj.height = 30;
       obj.width = 30;
       octx.fillRect(0, 0, 30, 30);
      
     ...