Manual
WAnsiDraw is an ANSI art editor in the browser. This page explains all tools, keys and file formats.
The screen
When you open the page, a start screen appears first and builds up as if it came over a modem. Enter, Escape, Space, a click or the Start button open the editor. If "reduce motion" is set in your operating system, it is shown without animation.
At the top is the blue menu bar with File, Edit, Tools, View, Templates and Help. The yellow letters open a menu together with Alt, for example Alt+F for File. Alt on its own activates the bar, then use the arrow keys, Enter and Escape.
On the left are the tools, the options, the current character and the color palette. The canvas is in the middle. Below it a bar shows the characters on F1 to F10 and the number of the character set. At the very bottom is the status line with cursor position, colors, tool, insert or overwrite, canvas size and zoom. A star after the zoom means: not saved yet.
Everything works with the keyboard alone. Tab moves between the canvas and the controls.
Drawing with the keyboard
Click on the canvas and type. Every character appears in the current foreground and background color. The arrow keys move the cursor, Home and End jump to the start or end of the line, Page Up and Page Down move by one screen. Enter goes to the start of the next line.
Insert switches between overwrite and insert. In insert mode the rest of the line moves to the right and the cursor gets thicker. Backspace deletes left of the cursor, Del deletes the character under the cursor and pulls the rest of the line in.
Character sets on F1 to F10
Like in TheDraw, F1 to F10 hold special characters. There are ten sets: single lines, double lines, mixed lines, crossings, shades and blocks, symbols, arrows and more. Shift+F1 to F10 selects a set, the arrows in the bar at the bottom do the same. Set 6 is active at the start, it holds the shades and blocks.
You can change the keys: open Tools, Character table. Pick a character with the arrow keys and press a key from F1 to F10, the character is then on that key in the current set. Your own layout stays saved in the browser. Tools, Reset character sets restores the defaults.
Colors without a mouse
Ctrl+Up and Ctrl+Down change the foreground color, Ctrl+Right and Ctrl+Left the background color.
Mouse tools
For all tools: the left mouse button uses the foreground color, the right one the background color. One mouse stroke is one undo step. Alt+click takes the character and colors of a cell in any tool.
| Half block brush | Every cell is two pixels on top of each other. The brush paints single pixels and sets the matching characters ▀ ▄ █ and colors by itself. That way you paint like in a paint program with double vertical resolution. Gaps from fast mouse moves are closed with a line. |
|---|---|
| Character brush | Paints the current character in the current colors. The right mouse button erases. |
| Color brush | Changes only colors, the characters stay. Left sets the foreground color, right the background color. |
| Eraser | Sets cells to a blank with a black background. |
| Line, rectangle, ellipse | Drag with the mouse button held down. The Filled option fills rectangles and ellipses. In half block mode the shapes use pixels, otherwise the current character. |
| Box frame | Draws with line characters, single or double (option Double frame lines). Dragging within one row or column makes a line, otherwise a rectangle. Where lines cross or touch, the editor sets the matching corners, junctions and crossings. |
| Fill | Fills a connected area. In half block mode it fills pixels of the same color, text characters act as a border. Otherwise it fills cells with the same character and colors with the current character. |
| Picker | Takes the character, foreground and background color of a cell. |
| Select | Drags a rectangular area, see the next section. |
Selection and clipboard
Select an area with the Select tool or with Shift+arrow keys. Ctrl+A selects everything, Escape clears the selection.
- Ctrl+C copies, Ctrl+X cuts, Del clears the area.
- Ctrl+V pastes as a floating selection. Move it with the mouse or the arrow keys, Enter or a click outside places it, Escape drops it.
- In the Edit menu: fill with the current character, replace colors only, mirror horizontally or vertically. Mirroring also turns characters that point in a direction, such as half blocks, corners, junctions, brackets and slashes. Without a selection the whole picture is mirrored, with a floating selection only that.
When you copy, the picture also goes to the system clipboard as ANSI text, so you can paste it into a terminal or a text editor. Text from other programs is pasted as plain text, Unicode characters are mapped to CP437.
Undo (Ctrl+Z) and redo (Ctrl+Y) go back at least 200 steps across all tools.
Canvas, colors and view
The canvas starts with 80 columns and 25 rows. Edit, Canvas size sets 1 to 160 columns and 1 to 1000 rows. Rows and columns are inserted or deleted at the cursor position.
The palette has the 16 VGA colors. An F marks the foreground color, a B the background color. The left mouse button picks the foreground, the right one the background.
- iCE colors: Normally only the eight dark colors work as a background, bright backgrounds mean blinking on real hardware. With iCE colors all 16 colors can be used as a background. The setting is stored in SAUCE.
- 9 dot mode: Real VGA cards show text characters 9 dots wide. The line characters from C0 to DF are extended into the ninth column so lines stay connected. This setting goes into SAUCE and the PNG as well.
- Zoom: 1x to 4x, always in whole steps and without smoothing. Ctrl+Plus and Ctrl+Minus or Ctrl+mouse wheel.
- Grid: shows the borders of the character cells.
All keys
The keys work while the canvas has the focus. The list is also in Help, Keys.
| Arrow keys | Move the cursor |
|---|---|
| Shift+arrow keys | Select an area |
| Home, End | Start or end of the line |
| Ctrl+Home, Ctrl+End | Start or end of the picture |
| Page Up, Page Down | One page up or down |
| Enter | Next line, places a floating selection |
| Insert | Insert or overwrite |
| Backspace | Delete left of the cursor |
| Del | Delete a character, or clear the selection |
| F1 to F10 | Put a character from the current set |
| Shift+F1 to F10 | Choose character set 1 to 10 |
| Ctrl+Up, Down | Next or previous foreground color |
| Ctrl+Right, Left | Next or previous background color |
| Ctrl+Z, Ctrl+Y | Undo, redo |
| Ctrl+C, Ctrl+X, Ctrl+V | Copy, cut, paste |
| Ctrl+A | Select all |
| Ctrl+S, Ctrl+O | Save, open |
| Ctrl+Plus, Ctrl+Minus | Zoom, also Ctrl+mouse wheel |
| Escape | Clear the selection, drop a floating selection |
| Alt | Activate the menu bar |
| Alt+letter | Open a menu directly |
| Alt+click | Picker in any tool |
Ctrl+N, Ctrl+T and Ctrl+W belong to the browser and are not used. New is in the File menu.
Opening and saving files
Open a file with File, Open (Ctrl+O) or by dropping it on the page. Files are saved as downloads, you choose the name in the dialog.
| .ans | ANSI with CP437 and color codes. When opening, the editor understands colors (blinking as iCE background as well), cursor movement, erase commands, line breaks and the automatic wrap after the width. When saving it writes as few codes as possible, no cursor positioning, CRLF line ends and ESC[0m at the end. Blanks with a black background at the end of a line are left out. |
|---|---|
| .bin | Binary Text: pairs of character and color. The width is stored in SAUCE, without SAUCE 160 columns are used. |
| .asc, .txt | Characters only, no colors. When opening, UTF-8 is detected and mapped to CP437, otherwise CP437 is used. When saving you choose CP437 (.asc) or UTF-8 (.txt). |
| .png | The picture at 1x, 2x or 3x, with 8 or 9 dots per character as set. |
The control characters 09, 0A, 0D, 1A and 1B cannot be stored as characters in .ans and .asc files. They are saved as blanks and the editor tells you. In .bin they are kept.
Full lines with 80 characters still end with CRLF. BBS terminals, WebCarrier BBS and 16colo.rs show this correctly. For very old DOS terminals that wrap right after the 80th character, keep the last column empty.
SAUCE
SAUCE is a small block at the end of the file with information about the picture. Archives like 16colo.rs and many viewers read it. In File, SAUCE info you enter title (35 characters), artist (20), group (20), date and comments. Width, height, iCE colors, 9 dot mode and the font "IBM VGA" are set by the editor. SAUCE is on by default when saving, you can turn it off in the dialog.
Templates for WebCarrier BBS
The Templates menu holds simple 80x25 screens for WebCarrier BBS: welcome, logon (after login), logoff and newuser (new users). They contain macros like @BBSNAME@, @SYSOP@, @USER@, @DATE@ and @TIME@ as plain text. WebCarrier BBS replaces them with the real values when it shows the screen.
Design the template, save it as .ans with the matching name and upload it to your board as a screen. The sysop guide of WebCarrier BBS lists all macros. Keep in mind that a macro can get longer or shorter when it is replaced. So don't put a frame right of a macro, or use the macros with a fixed width like @BBSNAME:40C@.
View as in a BBS
File, View as in a BBS plays the picture character by character, the way it came over a modem back then. Choose 2400, 9600, 14400, 28800 or 57600 baud or unlimited. Escape or a click on the picture stops it, Restart plays it again.
Viewer on phones and tablets
On screens narrower than 900 pixels and on devices without a mouse a viewer starts instead of the editor. There you can open files, look at them, zoom, save them as PNG and play them in the modem preview. The link "Open the editor anyway" starts the editor there too, but drawing is only comfortable with a keyboard and a mouse.
Tips for good ANSI art
- Half blocks: ▀ and ▄ give you twice as many pixels in height. The half block brush takes care of characters and colors, you just paint.
- Shades: ░ ▒ ▓ mix foreground and background color. A row like blue, ░ blue on light blue, ▒, ▓, light blue makes a soft transition.
- Gradients: Good gradients use colors that belong together: black, dark gray, light gray, white. Or blue, light blue, light cyan, white. Or red, light red, yellow, white.
- Contrast: Bright letters on a dark background read best. A dark shadow at the bottom right lifts lettering off the background.
- Less is more: Two or three color families per picture look calmer than all 16 colors.
- Width: 80 columns is the standard for BBSes. Plan screens for 80x25 so they fit on one screen without scrolling.
Storage in the browser
The editor keeps a copy of your drawing in the localStorage of your browser all the time. On your next visit it asks whether to restore it. New and Open ask first if there are unsaved changes.
Only the drawing and your settings (character sets, zoom, switches, last file format) are stored. None of it leaves your browser, there are no cookies and no requests to other servers. File, Clear stored data removes everything. The copy does not replace saving: in a private window or after clearing the browser data it is gone.