Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Pixel Editor Tutorial

Pushing pixels since 2015

License

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.

About

Step by step tutorial building a image editor in javascript

Resources

License

Releases

No releases published

Packages

No packages published