Luna Paint

⚠ This is an early preview - some features you expect may be missing or limited.

Features

Performance: The editor is built on WebGL2 to achieve great rendering performance.
Layers and blend modes: Compose an image from multiple images and combine them using blend modes.
Powerful tools: A growing range of tools are available to modify images.
Hot exit: The editor supports hot exit just like a text editor within VS Code (currently only for small images).
Remote support: Edit images on remote machines via the Remote WSL, SSH and Containers extensions.

Tools

The Tools window is available in the top left of the editor and allows switching the active tool.

The window can be hidden by hitting the X icon and toggled via Luna's Menu, the command palette or F5.

Pencil

The Pencil tool is used to draw individual pixels.

Use left or right click to draw freehand using the primary or secondary color.
Shift+click to draw a line from the last point, holding shift will show the angle of the line and which pixels will be drawn to.
Set the Blend Modes to be used with the pencil, or select replace to replace the color without blending.

Eraser

Fill

The Fill tool will flood fill an area with similar colors to the pixel it was triggered on.

Set the Flood Mode option to global in order to replace pixels across the entire image, regardless of whether they are adjacent

Color Picker

The Color Picker tool (aka eye dropper) allows sampling a layer's individual pixels for their color.

Change the Sampling option to average the colors over a range of pixels.

Selection, Move Selection and Move Pixels

The Selection, Move Selection and Move Pixels tools allow selecting a portion of the image/layer, modifying that selection without making a new one and moving the selected pixels.

Ctrl/cmd+a can be used to select the entire image.

Zoom

The Zoom tool allows zooming in and out with left and right click respectively.

Ctrl+wheel can also be used to zoom, regardless of what the active tool is.

Palette

The Palette window lets you select the primary and secondary colors, with some basic colors available for quick access.

In most tools, left click uses the primary color and right click uses the secondary color.
Transparent colors display over a checkered background.
Pressing x will swap primary and secondary colors.
The window can be hidden by hitting the X icon and toggled via Luna's Menu, the command palette or F8.

Layers

The Layers window shows a preview of the image's layers and lets you modify their properties or change the active layer.

The controls at the bottom of the window manipulate the current layer.
The blend mode of a layer changes the way it blends with the layer(s) below.
Layers can be temporarily hidden by clicking the checkbox.
The window can be hidden by hitting the X icon and toggled via Luna's Menu, the command palette or F7.

There are many commands that run on either the Layer or Image (all layers), these are accessible via Luna's Menu or the command palette:

History

The History window allows viewing and navigating through changes made to the image, it's a more visual representation of VS Code's undo/redo stack.

Clicking an item in the history window will undo/redo to that point.
The window can be hidden by hitting the X icon and toggled via Luna's Menu, the command palette or F6.

Preview

The Preview window shows a preview of the image when all the layers are flattened, this is especially useful when working with pixel art as you can be zoomed fine tuning the image while still seeing a 1x view of it.

Show the preview window through the menu or by running the Toggle Preview Window command
Clicking the preview will toggle between 1x and 2x zoom.

Customization

Default image size

The image size when creating a new image can be defined in the luna.defaultImageSize settings. You may want to set this to the size of your monitor setup for example to quickly paste in screenshots.

Free up memory of backgrounded tabs

Disabling luna.retainContextWhenHidden will dispose of editor contexts, slowing down tab restoring while freeing up memory. This is enabled by default because files where hot exit are disabled will lose changes when switching tabs.

Quickly paste a screenshot into VS Code

The luna.file.new command supports providing width and height arguments, so you can create a keybinding that creates a new image using your monitor dimensions, for example for a single 1080p monitor:

{
  "key": "ctrl+'",
  "command": "luna.file.new",
  "args": { "width": 1920, "height": 1080 }
}

With a keybinding like this, pasting in a screenshot is as easy as ctrl+' followed by ctrl+v.

Limitations

Loading and Saving Files

The loading and saving of image files (png, jpg) is currently handled by Electron/Chromium, as such there is no means to tweak/optimize how the images get encoded. This also means that while the editor does support layers, saving an image that supports layer is not currently possible. More options for file formats and encoding options is planned for the future.

VS Code Custom Editors

Luna Paint is built on VS Code's custom editor's API. Below are some of the limitations in the API.

The tab may lock up when doing busy work (filling, resizing, saving, etc.), the editor was built to support workers in order to keep the UI thread responsive, but it needed to be turned off until microsoft/vscode#87282 is done.
Large images can take a while to load, this is because of the slow transfer speed and lack of ArrayBuffer support of postMessage, see microsoft/vscode#79257.
Hot exit is only enabled by default for relatively small images, this is largely due to the slow transfer speed and lack of workers mentioned above.
Hot exit will prevent closing with an error about dirty custom editors if you make a change and switch away from the tab. "retainContextWhenHidden": true works around this, the proper fix is microsoft/vscode#113507.

Daniel Imms