Text2Canvas (Documentation)

Text2Canvas is an awesome, open source program written in Javascript to make it easier to use the Piet Programming Language by David Morgan-Mar.
Namely, to make it easier, it limits the amount of mouse precision required to properly and quickly code in Piet by enabling the user to do everything they can do in a normal image editing program by using text commands. This is not intended to be the textual version of Piet. Rather, it is simply a way to draw images using text geared toward programming in Piet. Besides, it's easier just to interpret an image itself. Yeesh. Feel free to copy the program and modify it as you please.

Above the text area are 5 number inputs and a save button.
The number inputs can be typed into or the blue and red buttons can be engaged to change the inputs' values.
The first and second input change the canvas image's x and y positions respectively.
The third and fourth change the dimension.
The fifth changes the scale of the pixels.
You can also click and drag on the canvas to move the canvas image.
The save button opens a new tab containing your picture. You can select between BMP and PNG file types.
The help button opens this page.

All commands are entered into the text area on the left.
The program works by using a 2D pointer to place pixels on a canvas, initially starting at the top-left. One creates images using commands that draw text and manipulate the pointer. When using only drawing commands, the pointer is automatically moved to the right and reregistered back at the left edge when it reaches the right edge. This behavior can be modified through the use of certain commands.

Color Commands

r draws a red pixel
y draws a yellow pixel
g draws a green pixel
c draws a cyan pixel
b draws a blue pixel
m draws a magenta pixel
w draws a white pixel
. draws a black pixel

Tip #1: Any number before any command but # and 3# repeats that command that many times minus one. # and 3# can be repeated using [ and ], see below. The math symbols -, +, * and / works as expected.
Tip #2: Commands that draw will naturally move the canvas pointer to the right, or to the left edge and down when it reaches the canvas edge.

Special Commands

l makes the next command draw a lighter pixel if it is a color command
d makes the next command draw a darker pixel if it is a color command
# draws a 6-byte hex color value Ex: #ff00ff
3# draws a 3-byte hex color value Ex: 3#Fc3
4# draws an 8-byte hex color and alpha channel value. 00 is fully transparent, ff is fully opaque. Ex: 4#FF000088
[ begins loop
] ends loop

Tip #4: Loops can be nested. To change the number of iterations, just put a number before any [.

Pixel Pointer Commands

The space character moves the pixel pointer to the right (compare to >)
< moves the pointer left
> right
^ up
v down
e sets the virtual right edge of the canvas to the pointer's x. If there is number before, instead sets it to the virtual left edge plus that number
s sets the virtual left edge of the canvas to the pointer's x. If there is number before, instead sets it to that number
E sets the virtual bottom edge
S sets the virtual top edge

Tip #5: Numbers work with these commands, too. Putting a 0 before e, E, s or S sets it to default edge.

Comments

{} contains a multiline comment
| denotes a single line comment

Tip #6: These commands are used to comment out text.