Skip to content

Instantly share code, notes, and snippets.

@BlakeDonn
Last active November 18, 2020 22:11
Show Gist options
  • Save BlakeDonn/7c309689adb83235114811b996cb25b1 to your computer and use it in GitHub Desktop.
Save BlakeDonn/7c309689adb83235114811b996cb25b1 to your computer and use it in GitHub Desktop.

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

Screen Shot 2020-11-18 at 4.03.16 PM

  • 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.

Screen Shot 2020-11-18 at 4.03.16 PM

  • 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

Screen Shot 2020-11-18 at 4.49.58 PM

  • 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?
@GreyMatteOr
Copy link

Currently I was imagining it something like this.

Screen Shot 2020-11-18 at 2 07 59 PM

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment