Interactive Canvas tools for students and teachers

The tools provided in the Interactive Canvas make it a versatile and creative space for exploring lesson content.

CanvasTools-Full.png

The majority of tools in the Interactive Canvas are available to both students and teachers:

A few tools are exclusive to teachers:

Click on each of the above to jump directly to its section in this article, or continue reading below.

Undo and redo

CanvasTools-UndoRedo.png

The circular arrows on the left end of the tool bar will undo and redo actions. If a mistake is made, e.g. an element is moved off the side of the canvas, click the arrow pointing counterclockwise to undo the action.
Note: Wait for the canvas to save between each click for best results.

To reverse an 'undo' action, click the clockwise arrow.

CanvasTools-Reset.png

Students also have a Reset button available, which takes the canvas back to the original state.

Back to top

The cursor

CanvasTools-Cursor.png

The black arrow is a standard cursor tool. Use this to select, resize, rotate, and move elements around the canvas.

EditShape.png

Select an element by clicking it with the cursor tool. Drag the square dots on the corners and edges of the bounding box to stretch, squash, embiggen, and shrink the element. Drag the circular dot on top of the element to rotate it.

Back to top

The pen

CanvasTools-Pen.png

The pen tool looks like a texter drawing a curvy line. Use this to draw freehand shapes on the canvas.

Combine this with the line weight and colour options on the right side of the tool bar.

Back to top

Shapes

CanvasTools-Shape.png

The shape tool offers a wide variety of predefined shape elements to choose from. Once the element is drawn with a click-and-drag motion, its size and dimensions can be edited using the bounding box of the element. Combine this with the line weight, line colour, and fill colour options on the right side of the tool bar.

Back to top

Lines and arrows

CanvasTools-Line.png

The line tool offers a selection of solid and dotted lines as well as arrows. Draw the line or arrow with a click-and-drag motion. To keep the line straight horizontal or vertical, hold the Shift key on the keyboard while drawing. Combine this with the line weight and colour options on the right side of the tool bar. 

Back to top

Text

CanvasTools-Text.png

The text tool allows the student or teacher to type in the interactive canvas. Click and drag across the canvas to determine the width of the text box. The height of the box will increase as more text is added. Combine this with the font size and colour options on the right side of the tool bar.

Back to top

Image Uploader

CanvasTools-ImageUpload.png

The image uploader allows the teacher or student to add a picture from their device to the canvas. Teachers can use images as creative backdrops for activities by locking them so students can't move them, or as automatically marking movable elements.

Back to top

Layer tools

CanvasTools-Arrange.png

Each element on the canvas (text box, shape, line, etc) exists on its own layer. The layer tools can bring an element forward or backward.

  • To bring one element forward so it covers another: use the cursor tool select the element and then click the layer tool with the up arrow. It may need to be clicked more than once, to move the element forward more than one layer.
  • To move an element back so it appears behind another: use the cursor tool to select the element and then click the layer tool with the down arrow. It may need to be clicked more than once, to move the element back more than one layer.

Back to top

Lock an element (teacher only)

CanvasTools-Lock.png

When the teacher locks an element, it cannot be selected or moved by a student. This is especially useful when creating backgrounds, instructions, or highlighted areas on the canvas.

Use the cursor tool to select the element to be locked, and then click on the lock tool. The padlock will appear closed when the element is locked, and a padlock icon will appear on the element itself. This icon is invisible to students.

Back to top

Marking (teacher only)

CanvasTools-AutoMark.png

Teachers can create automatic feedback for elements on the canvas to greatly reduce time spent on marking student work later. This can be applied to drag-and-drop tasks and is widely used by the Stile content team.

WhoopsFixCanvas.gif

Use the cursor tool to select the element to be automatically marked, and then click on the marking tool on the right side of the toolbar. Click and drag the mouse over the area to be marked.

A bubble will appear with a text field and a toggle switch. Choose whether the area is to be marked correct or incorrect and then type in the desired feedback. One element can be assigned multiple correct and incorrect areas on the canvas. These areas are invisible to the students.

Note: An element will be marked incorrect if it is placed anywhere outside the correct area. Adding an incorrect area allows the teacher to leave written feedback as well as a mark.

Back to top

Customise colours and fonts

CanvasTools-LineSize.png

The line width tool adjusts the thickness of lines, arrows, and shape outlines. Use the cursor tool to select the element to be modified before adjusting the line width.

CanvasTools-LineFillColours.png

The line colour tool changes the colour of the line, arrow, or the outline of a shape. The fill colour tool changes the colour of a shape. Use the cursor tool to select the element to be modified before adjusting its colour(s).

CanvasTools-TextSizeColour.png

The font size tool shrinks and embiggens the text. The font colour tool changes the colour of the text. Select the text to be modified before adjusting its size and colour.

Back to top

Keyboard Shortcuts

shortcuts.png

To access a full list of keyboard shortcuts available for working in the widget, click on the canvas (not in a text box!) and then press Shift + ? on your keyboard.

Back to top

0 Comments

Article is closed for comments.