Garrett-Bodley

// this.width and this.height are just shorthands for this.canvas.width and this.canvas.height

undoLast = () => {
    this.stateLog.pop();
    this.clearCanvas();

    if(this.stateLog.length > 0){
      const imageData = this.stateLog[this.stateLog.length - 1]
      
      // This is the part that's needed to be fixed

Garrett-Bodley

undoLast = () => {
    this.stateLog.pop();
    this.clearCanvas();

    if(this.stateLog.length > 1){
      const imageData = this.stateLog[this.stateLog.length - 1]
      
      // This is the part that's different
      this.ctx.putImageData(imageData, (this.width - imageData.width)/2, (this.height - imageData.height)/2)

Garrett-Bodley

undoLast = () => {
  
  this.stateLog.pop();
  this.clearCanvas();

  if(this.stateLog.length > 1){
    const imageData = this.stateLog[this.stateLog.length - 1]
    this.ctx.putImageData(imageData, (this.width - imageData.width)/2, (this.height - imageData.height)/2)
  }
  

Garrett-Bodley

saveState = () => {
  const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height)
  this.stateLog.push(imageData)
}

Garrett-Bodley

startDrawing = (e) => {
  this.drawing = true;
  this.ctx.beginPath();
  this.draw(e);
}

stopDrawing = () => {
  if (this.drawing === true){
    this.drawing = false;
    this.saveState()

Garrett-Bodley

addListeners(){
  this.canvas.addEventListener('mousedown', this.startDrawing)
  this.canvas.addEventListener('mouseup', this.stopDrawing)
  this.canvas.addEventListener('mouseleave', this.stopDrawing)
  this.canvas.addEventListener('mousemove', this.draw)
}

Garrett-Bodley

class Sketchpad{
  
  constructor(){
    this.canvas = this.createCanvas()
    this.ctx = this.canvas.getContext("2d");
  }
}

Garrett-Bodley

class Sketchpad {
  
  constructor(element){
    this.parent = element;
    this.canvas = this.createCanvas()
  }
  
  createCanvas = () => {
    let canvas = document.createElement('canvas');
    canvas.id = "canvas"