Skip to content

Drawing

The drawing board is the palce where you'll spend most of your time when working with Codedraw. When editing your empty project your board will look like the following:

/codedraw/empty_drawing_board.png

Add a block

To add a block to your board click on the + button in the top right corner of your screen and select an item from the dropdown menu. Once you have selected the item a new block will appear on your board, you can drag and drop the block around the board and leave it where it most suits you.

/codedraw/one_item_drawing_board.png

You'll notice anytime you make a change to your board that the green tick next to the save button turns into a yellow warning icon. That indicates that you have unsaved changes.

It's important to remember that any change you make is NOT automatically saved. To avoid loosing your changes make sure you click on the save button before leaving the page.

Connect two blocks

Connecting blocks to each others is how you define bindings between your blocks. Each block has at least one handle. The left hand side handle is the target of a connection while the right hand side handle is the source of a connection. Not all blocks can start a connection but all blocks can be a target.

/codedraw/connection_drawing_board.png

To delete a connection simply delete one of the blocks or click on the connection line and hit the del or backspace key on your keyboard.

Delete a block

Each block has a 3 vertical dots icon on the top right corner. Clicking on this button brings up the block submenu. You can find the delete option, click it to delete this block from your board.

When a block is removed all of its connections are also deleted.