So now for yet another canvas example, this one is going to be pretty cool, or at least I think so. It has to do with the limits of 2d images when it comes to a set resolution and color depth. Or in other words every image that is possible when given a finite width, height and color depth.
When working with an image of any fixed width, height, and color depth there is a finite number of possible combinations for that kind of a matrix. Sure as you increase the resolution and color depth the total number of possibilities does start to become a crazy large finite number but it is still never the less a finite number never the less.
I put together a library just for this canvas example. It contains methods that do things like converting an index number to a string that is formated depending on the color depth of the image matrix.
So I started off the library with just an object literal, the reason why is because I think this kind of pattern will work okay for this module. The whole module is just going to be a collection of methods that just accept arguments and return a product without anything going on with a state.
So the images that I am going to work with can be stored as a string of chars where each char is a color depth value. For this canvas example I am going to be keeping the color depth very low, so I can get away with each char in the string representing a color index value for each pixel. This kind of system should just about always work because I can not see the color depth getting really high as the number of possible combinations of images gets crazy high enough with just two index colors.
I then also have some methods that can be used to convert a string to an array of arrays where each element in a nested array is a pixel color index value. This is another format that I tend to work with often so I would like some convenience methods to convert to this from and back again.
Included in the collection of methods is a method that can be used to draw an image in chunk format to a given canvas. This method works by passing a reference to the canvas as the first argument, and then a chunk of the image as the second argument. I can also then use a custom pallet to set which color to draw for each index value.
For the utility library I just have my create canvas method, and a get canvas relative method. These are to just create and append the canvas element itself, and get a pointer event position that is relative to the canvas rather than the window.
When I start up this project in my browser I can see the starting image that I have set. I can then use the mouse to click on the canvas and when doing so I change the indexed color value of the logical pixel of the matrix, in turn this also updates the index value in the text input element. I can also use the text input element to change the image also, and this can then also be used as a way to save the state of the image.
There is way more to develop and wrote about when it comes to this kind of canvas example. It would be nice to get inti using a library that will make used of big integers, as well as methods that will figure how long it will take to run there all possible image combinations. Still I think that this is a real cool canvas example even in its current crude form.