Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Pixel Editor Tutorial

Pushing pixels since 2015


Pixel Editor

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.


Step by step tutorial building a image editor in javascript




No releases published


No packages published