painting on pdf version 3

can plaint on current page try to update and DL PDF

by otorineko6790

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.6.416/pdf.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/otorineko6790/homeworkSystem/jquery.toolbar.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/otorineko6790/homeworkSystem/jquery.toolbar.css" rel="stylesheet" />

<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" style="position:absolute; top:80px;"></div>
<!--
<div id="buttons" class="container">
    <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>
    <button id="saveAll">save all</button>
    <button id="download">download</button>
</div>
-->
<table id="tools">
			  <tr>
				<td>
				  <div id="save" class="btn-toolbar"><i class="fa fa-save"></i></div>
				</td>
				<td>
				  <div id="font" class="btn-toolbar btn-toolbar-primary"><i class="fa fa-font"></i></div>
				</td>
				<td>
				  <div id="undo" class="btn-toolbar"><i class="fa fa-undo"></i></div>
				</td>
				<td>
				  <div id="color" class="btn-toolbar btn-toolbar-primary"><i class="fas fa-fill-drip"></i></div>
				  <div id="color-op" class="hidden">
				  <a href="#"><div id='red' style="width: 20px; height: 20px; background-color: red;"></div></a>
				  <a...

CSS

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

#tools {
  position: absolute;
  top: 5px;
}

#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;
}

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

#download {
  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 pages = [];

showPage();

$('#color').toolbar({
  content: '#color-op',
  position: 'bottom',
  event: 'click',
  hideOnClick: true
});

////****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() {
  showPage();
});

$("#save").on('click', function() {
  pages[pageNum] = canvas.toDataURL("image/jpeg", 1.0);
});

$("#download").on('click', function() {
  let pdf = new jsPDF();
  for (let i = 1; i < pages.length; i++) {
    if (i != 1) pdf.addPage();
    pdf.addImage(pages[i], 'JPEG', 0, 0);
  }
  pdf.save("download.pdf");
});

$("#saveAll").on('click', function() {
  for (let i = 1; i < maxPage; i++) {
    pageNum = i;
    showPage();
    pages[pageNum] = canvas.toDataURL("image/jpeg", 1.0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
  //pageNum = 1;
  //showPage();
});

////****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;

      canvas.addEventListener('mousedown', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        ctx.beginPath();
        ctx.moveTo(mousePos.x, mousePos.y);
        evt.preventDefault();
        canvas.addEventListener('mousemove', mouseMove, false);
      });

     ...