Canvas.md

Canvas Setup (slicing the image)

We agreed that utilizing the slicing feature on the drawImage() canvas method would allow us to split our image into segmented pieces to be interacted with by the user. Below are the documented decisions that were made in the initial steps of this process

• Initial attempt was to target html ref="canvas" and utilize accordingly as is traditionaly done in vanilla JS, this threw the below error from React

• Second attempt will be to utilize useRef() or createRef() as recommended above

• By importing the useRef() hook, and assigning a variable canvasRef to the invocation of this hook, we are now able to utilize canvas in a conventional way

• For the means of functional experimentation, we currently have canvas being returned from a functional component with the capability to draw to the DOM onClick().

• The thought process here is that the canvas functionality of drawImage() will allow us to slice our picture into multiple pieces be be interacted with by the user

• The below code shows the culmination of the above steps, and ultimately displays the image by the provided source to the DOM with the speicfied dimensions.

• For the sake of clarity, the below canvas is representative of the initial Programmed Tiling Algorithm before any abastraction. This is meant to ber a visual display of what this algorithm will ultiamtely represent in the form of a 3x2 canvas built off a 300px200px image

• Next step is to abstract this canvasing and build in the logic from the "Programmed Tiling Algorithm"
• Questions currently being considered:
  1. What datatype will each of these canvasses be? Currently the HTML displays all 6 of these as one invididual Canvas element with no real way to inteact from what I can tell
  2. Are we considering making these react components?

Currently I was imagining it something like this.

each of these divs could maybe be like a Room class that had some rendering logic. This might overly complicate things (if we can't find an easy way to pass DOMnodes easily), and if that's the case, we can always do it the old fashion way (with document.removeChild and document.addChild or document.addSibling).