PixelEditor

a portable pixel editor widget

npm install @potch/pixeleditor

Touch support is quite lacking right now, but mouse and keyboard support is available!

PixelEditor Class

new PixelEditor(options)

creates new PixelEditor object.

options is an object with the following properties:

name | required? | type | default | description ---|---|---|---|--- width | yes | Number | n/a | width of the drawing height | no | Number | value of width | height of the drawing zoom | no | Number | 8 | amount to scale drawing canvas colors | no | Array | see "Default Colors" below | the colors to display in the widget's palette currentColor | no | Number | 1 | index in colors of the initial drawing color bg | no | Number | 0 | index in colors of the color to use to fill the initial drawing and the drawing after calling clear() container | no | Element | n/a | element to append the widget to. Optional as you can also call mount() onUpdate | no | Function | n/a | callback to call when the drawing changes

Colors

colors are provided as an Array of [red, green, blue] Arrays, where the color components go from 0 to 255.

The default colors are:

[
  [255, 255, 255], // white
  [0, 0, 0],       // black
  [255, 0, 0],     // red
  [255, 255, 0],   // yellow
  [0, 255, 0],     // green
  [0, 255, 255],   // cyan
  [0, 0, 255],     // blue
  [255, 0, 255]    // magenta
];

onUpdate

If a Function is provided to the constructor, it will be called when the drawing is updated. this will refer to the PixelEditor instance.

Methods

These are the intended public methods of the class. Other methods are available, but are subject to change.

mount(container)

Appends the widget to a container element. Called automatically if container is passed to the constructor.

• container - an existing element on the page

clear([color])

Resets the drawing to a single color.

• color (optional) - the index in colors of the color every pixel should be set to. Defaults to bg.

resize({ [width], [height], [zoom] })

Resize the drawing canvas to the provided dimensions and zoom. At least one of width, height, and zoom must be provided.

undo()

Restore to the previous drawing state.

toImageData({ [zoom] })

Returns an ImageData object containing the drawing scaled to the provided zoom.

• zoom (optional) - scaling factor to apply to the drawing when exported. Defaults to 1.

toBlob({ [zoom] }).then(blob => ...)

Returns a Promise that resolves with a Blob of type image/png containing the drawing scaled to the provided zoom.

• zoom (optional) - scaling factor to apply to the drawing when exported. Defaults to 1.

Keyboard Support

When focused, the following key controls are available:

• up, down, left, right: move cursor
• D, L, F: select Draw, Line, Fill tools
• Z: undo
• space: activate current tool
• [ and ]: cycle through colors
• Alt(Option) + X: clear canvas