ImageBooth Recap: Multilayered ImageEditor in pure Javascript

As I’ve been finishing features, I’ve just been updating what the new stuff is… but now that I have a working implementation of layers (though save isn’t yet linked to layers), I figure it’s time to stop and give an overall view of the ImageBooth Demo app and what it does.

When you open it up you see a vanilla image editor interface. What is important to note, is there is an internal compositing framework outputting to 1 canvas in the end, with ImageBooth using many canvases internally for layer and render buffers. Also, the 4 main interfaces(Brushes, Tools, Filters and Operations) are all pluggable, so it’s simple to contribute.

The Editor GUI

The currently available plugins are:


  1. Paintbrush – paint the foreground color onto the selected layer
  2. Eraser – paint the background color onto the selected layer
  3. Clone – clone pixels relative to the clone source using the current brush
  4. the image drowned in colorPaintbucket – flood fill a color into an image at a certain pixel with a given threshold and opacity
  5. Eyedropper – sample a color from the current layer


  1. the image, inverseNegative – invert the color values of the image
  2. a shadowy lurker of an imageBrightness/Contrast


  1. the image, inverseGaussian Blur – Blur the image
  2. Sobel Edge Detector
  3. a shadowy lurker of an imageLaplacian Gradient Detector
  4. a shadowy lurker of an imageSharpen
  5. a shadowy lurker of an imageEmboss
  6. a shadowy lurker of an imageHigh Pass Filter


  1. 1×1
  2. 3×3 Round
  3. 5×5 Square
  4. 5×5 Round
  5. 5×5 Soft Round
  6. 10×10 Scattered
  7. 10×10 Soft Round

So while it’s definitely got a lot of rough edges, it’s really becoming more practically useful all the time. That is, unless you use IE…

So go to the ImageBooth Beta, grab an account, and play around with it.