How to to make the canvas scrollable to contain multiple pages scanned pdf?

Question

I'm beginner to HTML5.

I use the Canvas to draw on it and i want to get the following abilities :

---

1. Allowing the canvas to be Expandable so if the image was set of scanned pdfs , i can show all the images (pdf pages).

2. I want the (Undo & Redo ) Functionality through the canvas .

Answer 1

I've done this before by storing the canvas state using the toDataUrl method to an undo_array :

var undo_array = [];

so before any change you do :

undo_array.push(myCanvas.toDataURL("image/png"));

now, when the undo button is pressed, just restore the previous picture :

var myImg = new Image();
oImg.onload = function() {
  var ctx = document.getElementById("canvasID").getContext("2d");       
  ctx.drawImage(myImg, 0, 0);
}
myImg.src = undo_array.pop();

but if you also change the canvas's seize, i guess you can use another array to store/restore seize changes.