Scene Setter

My HTML5 image editor that I use to create images in my documentation website (example).

Compatibility

Use with Firefox 4 only. Untested on other browsers.

Technology

• HTML5 Canvas
• HTML5 File API (drag and drop)
• jQuery
• CoffeeScript

Usage

At the top you will see the result canvas and below it you will see a list of layers. Below that list you will see a lot of buttons.

Let's look at the layers. Each layer has buttons that do things:

• del: Delete that layer.
• up: Move that layer up.
• down: Move that layer down.

And most layers have each own set of additional buttons.

To add an image to the canvas, drag images from the desktop and drop it on the canvas, this creates a new image layer.

Now let's look at the toolbar at the bottom, you will see:

• width: Change canvas width.
• height: Change canvas height.
• new-background: Add a new background layer.
• new-shadow: Add an inner shadow to the image.
• new-frame: Add a rounded frame layer to the image (like shadow layer but with rounded borders).
• new-script: Add a custom rendering script. When you click this button a popup dialog will open up to allow you to write custom CoffeeScript code to draw to the canvas.

Variables in Custom Script Layer

• w: Width
• h: Height
• ctx: Context
• canvas: Canvas Element

Example CoffeeScript Code

Fade bottom out

ctx.globalCompositeOperation = 'destination-in'

r = 100
grad = ctx.createLinearGradient 0, h - r, 0, h

grad.addColorStop 0, 'rgba(0,0,0,1)'
grad.addColorStop 1, 'rgba(0,0,0,0)'

ctx.fillStyle = grad
ctx.fillRect 0, 0, w, h