Web Draw

Contents

Show/Hide

Sessions

Imagine a session is the room you're in. Everybody in the same room sees and works on the same drawing.
If you have the ID of the session you want to join, type it in the box and click "Join Session"!
If you're looking to start a new session, type in an ID for it and click "Create Session"! Or, if you like, leave the ID box blank and you'll get a random 4-character ID.

You may be prompted to enter a password when joining a session. If you don't know it, you can't join the session!

Session Links

If you're looking to share the link with your friends so they can automatically join, see Share Link on the menubar.

The session URL can be used to automatically join the session. It follows this format:
https://w-draw.web.app/s/<session_id>, where <session_id> is the ID of the session to join.
If a session with the given ID does not exist, a new one with that ID will be automatically created and joined.

The session password can also be passed through the URL in a query string:
https://w-draw.web.app/s/secret-drawing?pass=<password>, where <password> is the session's password.
If you are creating the session with this link (a session with the specified ID doesn't exist yet), then the password on the new session will be automatically set to the one specified.

Menubar

The menubar (at the very top of the screen) allows you to do useful things, like save your canvas for later, set a password on your session, or look at this help window!

Save/Open

Web Draw can save and open files containing the info it needs to recreate your canvas. It's similar to the data that is sent to a new client joining your session. It contains the canvas' undo and redo data, which are lists of actions (strokes, flood fills, lines, etc.) clients have made and their properties (colour, opacity, etc.).

WARNING!
The canvas data format is going to change and will become incompatible with newer versions of Web Draw.

Export/Import

With the "Export" button, you can save your drawing as a PNG image!
And with "Import", you can upload an image to use in your drawing!

Resize Canvas

In the "Edit" menu, the "Resize Canvas" button allows you to change the size of the canvas. Good if you need that extra bit of space, or if you have too much extra space.

When choosing a new size for your canvas, you may also choose an offset position for the original image on the new canvas and how to fill new canvas space.
The "Centre" button will automatically set the offset position so that the original image will be centred on the new canvas.

Session ID & Password

Through the "Session" menu, you can change the current session's ID and set (or remove) a password.

Share Link

Here you can get a link that you can share with your friends which will allow whoever uses it to automatically join the session. If your session has a password on it, you can optionally include it in the link so that whoever uses your link doesn't have to type it in. If the password isn't included, they will be prompted to enter it before joining, just like from the main page.

Info

This "Info" window will show a little info about the web app and the client (you!).
Ping is the latency of the connection to the server. Every 10 seconds, the server will send a ping to your browser and wait for a pong to make sure the connection is still alive. It also measures the amount of time between when the ping was sent and the pong was received, and tells the browser about it so it can display it here so you can know about it. If you're curious, I typically get an average latency of around 40 ms.

Top Toolbar

The top toolbar has your canvas controls.

Undo/Redo

Click the "Undo" button to undo the last action on the canvas.
Click "Redo" to redo the last undone action.

Note: These are actions that anyone in the session has made, not just your own.

Clear

Clear the canvas to all white. Double click to clear to all transparent pixels. (#00000000)

Canvas Zoom

This is the displayed size of the canvas on your screen. This doesn't affect the actual size of the canvas or the zoom of the canvas on anybody else's screen. If you need to be more precise or detailed or just need to draw something small, you can zoom in a bit.
To change it, you can either use your mouse wheel on the canvas area with the Control key held down, or if you want, you can enter percentage size into the number box.
The "Reset" button will reset the zoom to 100%.
The "Fit" button will set the canvas zoom to the largest size that will fit in the canvas area.

Left Toolbar

On the left, you've got all your different tools.
Pen: Draw a free-form line however you want!
Eraser: Erase part of the canvas to transparency or the background colour. (Uses pen tool internally)
Flood Fill: Fill an area of a similar colour, decided by the fill threshold. Colours with a difference within the threshold will be recoloured.
Colour Picker: Click on a spot on the canvas and set one of your colours to the colour of that spot.
Rectangular Select: Select an area on the canvas to manipulate. You can copy, cut, paste, and clear pixels in your selection.
Line: Draw a straight line between 2 points.
Rectangle: Draw a rectangle, with optional outline & fill.
Ellipse: Draw an ellipse, with optional outline & fill.

Note: With every applicable tool, the left mouse button will use Colour 1, and the right will use Colour 2.

Right Toolbar

The right toolbar has 2 tabs: A tool settings tab and an action history tab.

Tool Settings

Here you can find your colours and settings for all your tools.

Colours

The colours are always shown. Colour 1 is the colour to use with the left mouse button, and Colour 2 is used with the right. Click on a colour in the table to the left with the left or right button to set the corresponding colour. Click on the colour box for Colour 1 or 2 to choose a custom colour with a colour picker, or type in a hex RGB or RGBA colour value in the box below. You can use 3-digit or 6-digit hex RGB colours, or 4-digit or 8-digit hex RGBA colours.

Tool Mode and Opacity Settings

The pen, flood fill, line, and shapes tools all share the following settings:

Mode

The "Mode" setting decides how new canvas content is added to the existing content. There are a total of 26 options, the most common of which I have put at the very top:
Normal: New content is drawn on top of existing content. This is what is considered normal, hence the name "Normal".
Behind: New content is drawn behind existing content. This means it will only be shown where the existing content has transparency.
Erase: Existing content is kept where it doesn't overlap the new content. This means the pixels where the content overlaps will be made transparent, like it's being erased.

The rest of the modes I won't describe here, but there are descriptions from the MDN documentation. Keep in mind I have renamed several of the options for clarity. You might be better off checking the tooltip for each mode, unless you want to see a picture.

Opacity

This is how "see-through" things you draw will be, 100 being completely opaque, and 0 being completely transparent.

Line Size Settings

With the pen, line, and shape tools, you can set a line size. When drawing shapes, this applies to only the outline of the shape.
This is the thickness of a line in pixels. The maximum is 10000, because I think that's a reasonable limit. Let me know if you think otherwise.

Line Cap Settings

The pen and line tools have a line cap setting.
The line cap is what the ends of a line will look like.
Pen cap options: Round, Butt, and Square.
Round: The ends of lines are rounded.
Butt: The ends of lines are squared off at the endpoints.
Square: The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.

Flood Fill Settings

Threshold

The maximum colour difference of a pixel from the original clicked colour to be recoloured. This is the maximum difference for each of the channels selected with the "Fill by" setting, not the total of all the colour differences. If all values are within the threshold, the pixel will be recoloured.

Fill by

This setting determines which channels to check for colour difference to decide whether or not to recolour the pixel. Available options are: RGBA (default), RGB, Red, Green, Blue, and Alpha.

Colour Picker Settings

You can merge the sampled colour with the current and/or sample the opacity in addition to colour.

Merge with current

The new colour will be the average of the current colour and the sampled colour. For example, if the current is black (0, 0, 0) and the sampled is white (255, 255, 255), the new colour will be grey (128, 128, 128).

Sample opacity

Set your colour opacity to the sampled pixel's alpha value.

Rectangular Select Actions

The rectangular select tool doesn't have any settings available, but there are buttons for manipulating your selection.

Copy

Copy the pixels at the selected area on the canvas.

Cut

Copy the pixels and then clear the selected area to Colour 2.

Paste

Put the pixels in the selection onto the canvas.

Clear

Set the selected pixels to Colour 2.

Shape (Rectangle & Ellipse) Settings

When drawing shapes, you can enable or disable outlines and/or fill.

Outline

The line around the outer edge of the shape. Uses the colour which the mouse was clicked with.

Fill

Whether or not the inside of the shape is filled with a solid colour. Uses the opposite colour from what the mouse was clicked with.

Action History

Here you can find the history of all actions that make up the canvas you see. Each entry in the list consists of a little snapshot of what the canvas looked like at that point in history and the name of the action that made it look like that. The current point in history is highlighted. Undoing or redoing will move that highlight up or down the list. Clicking any given entry in the list will take you to that point in history.

The following are some ways you can edit action history. Keep in mind that these changes will affect actions that come after the edited one, as you're changing history!

Toggling Actions

Any action in history can be enabled/disabled at any time with the button to the right of an action entry in the table. When an action is "disabled", it will be as if it was never made.

Moving Actions

Moving actions up and down in history can be done with the up and down arrows next to action entries. An action that is moved up will happen before the previous action, and an action that is moved down will happen after the next action. This may be useful if your buddies accidentally mess up the order of things, since you're all drawing at the same time.

Chat

Use the chat to send messages to other people in the session, including private messages to people you choose.

Private Messages

Normally, a message is sent to everyone in the session. However, if the message begins with "to:", it will be a private message sent only to the people with the client IDs that follow. For example, if your message is "to:x7sm PRIVATE MESSAGE!!!", only you and the person with the client ID of x7sm will be able to see the message, and no one else. You can also use a comma-separated list of IDs, like this: "to:x7sm,18hp Hello!"

There MUST be a space between the "to" list and the message.

Clicking the name of a user in the chat (above a message they have sent) will add their client ID to the "to" list in the message box.

Formatting

You can also use some formatting similar to markdown in your messages. Available formatting:

Typed	Displayed
**Bold Text**	Bold Text
*Italicized Text* OR _Italicized Text_	Italicized Text
__Underlined Text__	Underlined Text
~~Strikethrough Text~~	Strikethrough Text

You can escape the special characters if, for example, you want to use asterisks around something without italicizing it. You can do that by putting a backslash before a special character. "\*text*" will suffice and will be shown as "*text*". If the opening or closing or both formatting characters are escaped (e.g. "\*"), the text will not be formatted. And as you should expect, you can escape the backslash as well: "\\**text**" will result in "\text".

Links

Valid URLs sent in messages using the HTTP or HTTPS protocols will be automatically converted into hyperlinks. For example, sending "https://google.com" will turn out like "https://google.com".

Bottom Toolbar

At the bottom of your screen is some session info.
You will see the ID of the session you are currently in and the number of users connected to it.
Your session ID can be easily copied to the clipboard by clicking on it. If you want to share a link where your buddies can automatically join your session without any other hassle, just copy the link in the address bar, which will have your session ID in it. (See above, Sessions.)
Finally, a "Leave" button to leave the session. You will be taken back to the main page.

Keyboard Shortcuts

Edit

• Ctrl + Z - Undo
• Ctrl + Shift + Z OR Ctrl + Y - Redo

View

• + - Zoom canvas in
• - - Zoom canvas out
• Set zoom:
  • 1 - 100%
  • 2 - 200%
  • 3 - 400%
  • 4 - 800%
  • 5 - 1600%

• Escape - Toggle chat sidebar

With Selection

• Ctrl + C - Copy
• Ctrl + X - Cut
• Ctrl + V - Paste

Other

• F1 - Open Help window

That means your browser is old. You should upgrade.
Web Draw doesn't work without WebSockets. Sorry, but no WebSockets means no Web Draw.

There was a problem while trying to set up the drawing in your canvas file.
It's likely that it is old and outdated - the canvas format has changed and will continue to change until I stop messing around with features.

There's been a problem with the server. That means something's really not right. :/
Try reloading the page, and if it still doesn't work, the server may be down. Sorry!

Current session ID: N/A

New session ID:

New password:

The session N/A has a password set on it. Please enter it to join.
Password:

Share this link with your friends to join this session!

Copy N/A

Name:

Session ID: N/A
Number of clients connected: 0

Clients:

ID	Name