Creating a Sprite Editor From Scratch
Let’s start with Canvas
If you are not familiar with Canvas it is an HTML5 DOM element that was created to designate a certain portion of the webpage for drawing. If you need a primer on Canvas there are many books, websites, and blogs that cover the topic extensively. This blog post will only cover the basics. In order to add a Canvas element to your page use the following tag:
<canvas id="myCanvas" width="800" height="600"></canvas>
“Many interesting and important things have been put into boxes over the years. textiles, other boxes, even children’s candy.”
“Do any of these boxes have candy in them?”
In order to create an array of objects we need to first create our object. In this case (in case you couldn’t tell from The Simpsons quote above) is going to be a box. Each box will have the usual attributes you would expect such as an x coordinate, y coordinate, length, and color all of which can be set in the constructor:
function box(x, y, l, color)
It is also going to have a method called draw. The draw method is where the app relies on some of the canvas functionality add a rectangle to the page. Now you are off to the races.
Creating the array
Begin by creating an empty two dimensional array. Two dimensional arrays are basically an array of arrays. These can be used for many things from storing data points or for creating matrices. In this case it is going to serve as our grid.
var grid = [ ,  ];
Then by looping through a nested for loop the grid can be populated with box using the defaults and drawn to the screen.
Adding the Event Listeners
“Just nod if you can hear me”
Next step is to create the event listeners which are going to allow interacting with the app. We are going to have three main event listeners:
Both mouseup and mousedown operate in a very similar fashion. They check the location of the mouse (e.clientX, e.clientY) and determine the bounding rectangle for that location. Assuming mousedown is true it will fill in that square. Using the state variable we can tell if the app is set to draw (state == 1) or erase (state == 0). Our mouseup function simply serves to set mousedown = false in order to stop drawing on mousemove.
The remaining events are for handing the button clicks from the UI to change state, change color, clear the screen, change the color, and export as a PNG.
Refreshing the screen
Whenever you are creating an app that draws to the screen you need to make sure the screen gets redrawn to reflect changes. We define a function called refresh() which gets passed into another Canvas function called requestAnimationFrame(). This function is then called recursively from within the refresh() to make sure it is continuously updated. The function clears the screen and runs through our nested for loop to fill in all of the squares in the grid with the assigned color.
Hopefully this post was informative and you will be on your way to creating some interesting web apps (be it accidentally or on purpose). Feel free to fork a copy of this pen and create your one enhancements. At least one person forked it to create their own version that allowed you to select colors from a color wheel. The more creative the better. Happy coding.
Originally published at resurgencewebdesign.com on December 31, 2015.