Canvas Controls Button

We need to use simple controls for our canvas like undo/redo or clear. It's a quite simple. let's create them

Clear Canvas Button

  1. As usuall let's create button GameObject/UI/Button and put it to the right bottom control. To do that you can select RectTransform and change pivot and position at once. You need to click on the left top rect then hold down shift+alt click the bottom right corner
    set pivot and position
  2. Set small ofset. set PosX=-10 PosY=10 so it won't be right on the corner and change width=120.
  3. Name this button as Clear
  4. now we need to ad event to this button. Click + in OnClick() event
    button on click
  5. Click on the object field and select Cavnas
    select canvas
    You can also drag and drop PaintCraft/Canvas scene object to this property
  6. Now you need to select the Canvas.ClearCanvas() function. To do that click on No Function button select CanvasController and ClearCanvas function
    clear canvas function

Thats it. start your scene, try to draw something and then clear canvas


Let's repeat button creation process for undo/redo

  1. Clone your Clear button 2 times.
  2. Setup (1) clonned button position. change caption, name and set following position: PosX=-75 PosY=50 Width=55
    undo button transform
  3. Setup (2) clonned button position. change caption, name and set following position: PosX=-10 PosY=50 Width=55. You should get nicely alligned buttons at the right bottom corner, something like this:
    canvas system buttons
  4. Select Undo button and Remove OnClick handler using minus button
  5. Add UndoActiveButtonController to UndoButton
  6. Select Canvas for this controller you will get this. Make sure that OnClick() is cleared properly
    canvas redo function
  7. Select Redo and repeat steps 4 to 6 but this time add RedoActiveButtonController

Your systems buttons are ready and you can start your scene and check that everything is works properly. You can even see that undo/redo is clickable only if you have something to undo or redo. By default history size is 10.

Back Next: Line Color and Thickness