I$\text{'}$m making a drawing app via p$5.$js with undo redo functionality. The functions work when using keyboard input & the undo works when i click the button however redo does not redo when i click it $($console log & alerts still trigger for it$)$ but it doesn't redo.

Sketch.js:

$//$global variables that will store the toolbox colour palette

$//$and the helper functions

var toolbox $=$ null;

var colourP $=$ null;

var helpers $=$ null;

function setup$()\{$

$//$create a canvas to fill the content div from index.html

canvasContainer $=$ select$(\text{'}$#content'$)$;

var c $=$ createCanvas$($

Math.floor$($canvasContainer$.$size$().$width $*0\mathrm{.}95),$

Math.floor$($canvasContainer$.$size$().$height $*0\mathrm{.}95)$

$)$;

c$.$parent$(\text{'}$content$\text{'})$;

$//$create helper functions and the colour palette

helpers $=$ new HelperFunctions$()$;

colourP $=$ new ColourPalette$()$;

$//$create a toolbox for storing the tools

toolbox $=$ new Toolbox$()$;

$//$add the tools to the toolbox.

toolbox.addTool$($new FreehandTool$())$;

toolbox.addTool$($new LineToTool$())$;

toolbox.addTool$($new SprayCanTool$())$;

toolbox.addTool$($new eraserTool$())$;

toolbox.addTool$($new mirrorDrawTool$())$;

toolbox.addTool$($new shapeTool$())$;

toolbox.addTool$($new bucketTool$())$;

background$(255)$;

noFill$()$;

$//$set the stroke weight to the value in the strokeWeightSlider element

strokeWeight$($getStrokeWeight$())$;

saveState$()$;

$\}$

function draw$()\{$

$//$call the draw function from the selected tool.

$//$hasOwnProperty is a javascript function that tests

$//$if an object contains a particular method or property

$//$if there isn't a draw method the app will alert the user

if $($toolbox$.$selectedTool.hasOwnProperty$(\text{'}$draw$\text{'}))\{$

toolbox.selectedTool.draw$()$;

$\}$ else $\{$

alert$("$it doesn't look like your tool has a draw method!"$)$;

$\}$

$\}$

function mouseReleased$()\{$

saveState$()$;

$\}$

function keyPressed$($e$)\{$

$//$ Undo with Ctrl$+$Z or Cmd$+$Z

if $($e$.$keyCode $===90$ && $($e$.$ctrlKey $||$ e$.$metaKey$))\{$

undo$()$;

$\}$

$//$ Redo with Ctrl$+$Y or Cmd$+$Shift$+$Z

else if $($

$($e$.$keyCode $===89$ && e$.$ctrlKey$)||$

$($e$.$keyCode $===90$ && e$.$metaKey && e$.$shiftKey$)$

$)\{$

redo$()$;

$\}$

$\}$

function isMouseInsideCanvas$()\{$

return mouseX $>=0$ && mouseY $>=0$ && mouseX $<=$ width && mouseY $<=$ height;

$\}$

document.addEventListener$(\text{'}$DOMContentLoaded$\text{'},$ function $()\{$

document.getElementById$(\text{'}$undoButton$\text{'}).$addEventListener$(\text{'}$click$\text{'},$ window.undo$)$;

document.getElementById$(\text{'}$redoButton$\text{'}).$addEventListener$(\text{'}$click$\text{'},$ window.redo$)$;

$\})$;

index.html

Answer rating: 100% (QA)

To implement undo and redo functionality in your drawing app using p5js you can follow these steps a... View the full answer