Pixel Editor Tutorial

Pushing pixels since 2015

This is the source code for the pixel editor app tutorial series on PhotoGabble.

Part One

Published Jan 21st 2015: Demo | Tutorial | Code

In this, the first part, we set up the application loop and complete writing functionality to understand mouse input on the canvas.

Part Two

Published Jan 28th 2015: Demo | Tutorial | Code

In part two we build the data structure for a 16x16 image with 1bit colour depth and complete by having a canvas that we can draw on.

Part Three

Published Feb 4th 2015: Demo | Tutorial | Code

In part three we build the 16x16 live preview so that you can see how your picture looks at its native resolution.

Part Four

Published May 8th 2015: Demo | Tutorial | Code

In part four we expand the images data structure to expand the colour depth and add a colour swatch interface for selecting colours.

Part Five

Published June 6th 2018: Demo | Tutorial | Code | PR

In part five we work on saving the image as a png and begin refactoring the code to keep things tidy.

Part Six

Published June 11th 2018: Demo | Tutorial | Code | PR

In part six we refactor the JavaScript code into ES6 and use babel to build the project.

Part Seven

Unpublished: Demo | Tutorial | Code | PR

In part seven we add the paint bucket tool and an undo history.

Part Eight

Unpublished: Demo | Tutorial | Code | PR

In part eight we write a simple PHP backend that is able to consume the image data structure as a string and store to a public library the png. We also write the functionality into our javascript app to be able to load from the public library.