The goal of this drawing app is to combine a vector art workflow with a typical raster art workflow. This app especially makes drawing pixellated curves and ellipses very easy. Lines made with vector tools can also be modified at any time, even on the same layer as rasterized pixels. The aim is to make a faster, smoother workflow for pixel artists.
This app is a work in progress. See the bottom of this page for features that are planned to be added in the future.
Functions
Undo/Redo
Actions that make a change to the canvas can be undone. Only affects actions which are non-reversible. Things like changing canvas dimensions, layer opacity, etc. are inherently reversible so do not qualify to be part of the undo functionality.
Color Picker
Foreground and background color swatches can be clicked to open a color picker. Color picker uses an HSL gradient selector for intuitive color changing. Ability to adjust individual color channels or type in a hexcode.
Zoom
Zoom with buttons or with the mouse's scrollwheel.
Recenter
Sometimes zooming can get out of hand. Press Recenter to bring the canvas back to normal size and starting position.
Clear
Clears canvas layer and removes any vectors that were on that layer.
Tools
Brush (B)
Draws a pixel where your pointer goes.
Fill (F)
Fill in contiguous spaces of color. This tool is a vector type tool so the position and color can be adjusted at any time.
Line (/ or Hold Shift with Brush)
Draw straight, pixel perfect lines. Click and hold to draw lines.
Quadratic Bezier Curve (Q)
Draws a quadratic bezier curve (3 control points). Click for each control point of the bezier curve, starting with the two endpoints. This tool is a vector type tool so the control points and color can be adjusted at any time.
Cubic Bezier Curve (C)
Draws a cubic bezier curve (4 control points). Click for each control point of the bezier curve, starting with the two endpoints. This tool is a vector type tool so the control points and color can be adjusted at any time.
Ellipse (O)
Draws an ellipse. Click down to place the center point and then drag to set the first radius. Initially this tool will draw a circle. Afterwards both radii can be adjusted separately to create an ellipse at any angle. By moving the cursor at the subpixel level you can adjust the way the center point behaves. For example, if the center is considered the center of the center pixel, a circle with a radius of 15 pixels will have a diameter of 31 pixels, but if the center is considered the top left corner of the center pixel, that circle will have a diameter of 30 pixels. Both the x and y components of this can be adjusted. This tool is a vector type tool so the control points and color can be adjusted at any time. Hold shift to force a circle.
Select (S)
Select a rectangular area. Restricts other tools to only draw inside selection area. Can be cut or copied via the edit menu. Can be adjusted via 8 control points or moved by clicking inside the selection area while the Select tool is active.
Eyedropper (Hold Alt)
Select a color that already exists on the canvas.
Grab (Hold Space)
Move the canvas position freely.
Move
Move a layer relative to other layers.
Brush
Change Brush Type
Click the brush preview to toggle between circle and square brushes.
Change Brush Size
Change brush size by moving the slider between 1 and 32 pixels diameter.
Brush Modes
Erase (E)
Chosen as a mode and not a tool in order to allow use with multiple tools (eg. Erase/Fill, Erase/Line).
Perfect (P)
Perfect pixel mode. Currently only works with pencil tool and enables smooth pixel perfect lines, even while drawing slowly.
Inject (I)
Translucent colors will be applied directly instead of placed on top of other colors.
Color Mask (M)
Drawing will only put color down on top of the selected background color (eg. If the background color swatch is red, it will only draw on top of red pixels).
Palette
Primary/ Secondary Swatches
Primary and secondary swatch. Click a swatch to open the color picker or press (R) to randomize the primary swatch color.
Switch Primary/ Secondary Swatches
Click to switch primary and secondary swatch colors.
Palette Knife (Hold K or click on the selected color)
Edit a palette swatch. Click the palette knife then click the color swatch you want to edit to open the color picker.
Palette Scraper (Hold X)
Remove a palette swatch. Click the palette scraper then click the color swatch you want to remove from the color palette.
Add Color to Palette
Click to open the color picker and add the selected color to the palette.
Layers
Add Raster Layer
Add a new layer for drawing.
Add Reference Layer
Add a new layer to be used for a background reference, such as for tracing. Reference layers cannot be drawn on.
Remove Layer
Click the trash icon to remove the selected layer.
Toggle Layer Visibility
Click the eye icon to hide/show the layer.
Layer Settings
Click the gear icon to open layer settings. The layer's name and opacity can be changed in the layer settings.
Change Layer Order
Drag a layer to change its position in the layer stack.
Vectors
List of vectors in the order they were drawn, newest at the top. The preview image reflects the vector's placement on the entire canvas area.
Select Vector
Click on a vector via the vectors dialog box to select or deselect it. Selecting a vector changes the active tool to match the vector. While using the cubic curve tool, vectors can also be selected via the canvas if using an option that shows other cubic curve vectors.
Change Color
Click on the color to open the color picker and change the vector's color.
Toggle Vector Visibility
Click the eye icon to hide/show the vector.
Remove Vector
Click the trash icon to remove the vector.
File Menu
Open
Open saved drawing from your desktop.
Save As...
Open dialog box to download file with current drawing progress.
Import
Import an image into the current layer.
Export
Download the image as .png.
Edit Menu
Resize Canvas...
Open a dialog box to change the canvas dimensions. Canvas dimensions are limited to between 8 and 1024 pixels.
Select All (Cmd + A)
Select entire canvas area.
Deselect (Cmd + D)
Deselect selection area.
Cut (Cmd + X)
Cut selection.
Copy (Cmd + C)
Copy selection.
Paste (Cmd + V)
Paste copied selection.
Tooltips (T)
Toggle tooltips on or off. Hover to see a tooltip.
Grid
Toggle the grid on or off. Only displays at higher zoom levels.
Subgrid Spacing
Define the number of pixels between the subgrid overlaid onto the main grid. At a value of 1 no subgrid will be rendered.
Key Features to be added
Dedicated Mobile/ Tablet UI
Stretch Features to be added
Vectors:
Ability to rasterize vectors and remove them from the vectors interface
Editable properties display for vectors
Rectangle Tool
Straight Line Tool (Existing Raster Line Tool will be separate)
Dithered Gradient Tool
Smooth curves mode for brush. When drawing quickly, curves can look choppy and angular. Calculates curvature between points. Bonus: convert entire brush stroke into a series of linked vectors.
Shapes which are a collection of vectors that can be easily selected to manipulate together.
"Cut" vectors at any point to subdivide it into 2 separate curves.
Raster Tools:
Mask Tool
Amorphous selection tool
Brush:
Dithered Brush mode
Custom stamp brush
Utility:
9-Grid Mode: Make repeating patterns for selected tile area. Also offer options for brick repeat and half-drop repeat
Preview window
Toggle magnify pointer area for precise placement of pixels: move magnifier on canvas and then work in magnified window to place pixels. Useful for any tools that use subpixels, and for precise placement of vectors.
Perspective Tool: Acts as a custom overlay on the canvas with user defined vanishing points and adjustable lines. 1-point, 2-point, 3-point, multipoint, 4-point curvilinear, 5-point curvilinear, isometric
Layers:
Layer Settings: Blend-mode, duplicate layer
Palette:
Choose from set of default color palettes
Ability to add colors to palette without closing the color picker
Color ramps in color picker, along with ability to add an entire color ramp to the palette
Optional palette mode with a small canvas for making a palette with a brush, eraser and eyedropper tools instead of the typical way of modifying a palette.
Animation:
Spritesheet options: custom grid to subdivide canvas
Animation options: preview spritesheet animation, onion skins as sublayers, preview animation of layers with onion skins individually and simultaneously, set framerate for animation layer, export animation
Run locally
Run npm install
Start a local server. For example, php -S localhost:8000 or serve
