Class # Canvas ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Warning

This item was deprecated in version 2021r3. Please use `DesktopCanvas` as a replacement.

## Description Canvas controls are very useful for implementing your own graphical controls because you can use the `Graphics` class drawing commands or the `Object2D` classes to draw inside the Canvas region. It can also be used to display existing graphics, like the `ImageWell`. ## Properties

table-centered_columns_3_and_4

| Name | Type | Read-Only | Shared | |---------------------------------------------------|--------------------------------------------------------|-----------|--------| | `Active` | `Boolean` | ✓ | | | `AllowAutoDeactivate` | `Boolean` | | | | `AllowFocus` | `Boolean` | | | | `AllowFocusRing` | `Boolean` | | | | `AllowTabs` | `Boolean` | | | | `AllowTabStop` | `Boolean` | | | | `Backdrop` | `Picture` | | | | `Enabled` | `Boolean` | | | | `Handle` | `Integer` | ✓ | | | `Height` | `Integer` | | | | `Index` | `Integer` | ✓ | | | `Left` | `Integer` | | | | `LockBottom` | `Boolean` | | | | `LockLeft` | `Boolean` | | | | `LockRight` | `Boolean` | | | | `LockTop` | `Boolean` | | | | `MouseCursor` | `MouseCursor` | | | | `MouseX` | `Integer` | ✓ | | | `MouseY` | `Integer` | ✓ | | | `Name` | `String` | ✓ | | | `PanelIndex` | `Integer` | | | | `ScaleFactor` | `Double` | ✓ | | | `Scope` | `Integer` | ✓ | | | `TabIndex` | `Integer` | | | | `Tooltip` | `String` | | | | `Top` | `Integer` | | | | `TrueWindow` | `Window` | ✓ | | | `Visible` | `Boolean` | | | | `Width` | `Integer` | | | | `Window` | `Window` | ✓ | | ## Methods

table-centered_column_4

| Name | Parameters | Returns | Shared | |-----------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|---------|--------| | `AcceptFileDrop` | FileType As `String` | | | | `AcceptPictureDrop` | | | | | `AcceptRawDataDrop` | Type As `String` | | | | `AcceptTextDrop` | | | | | `Close` | | | | | `DrawInto` | g As `Graphics`, x As `Integer`, y As `Integer` | | | | `Invalidate` | \[EraseBackground As `Boolean`\] | | | | `Refresh` | eraseBackground As `Boolean` | | | | `Scroll` | DeltaX As `Integer`, DeltaY As `Integer` | | | | `SetFocus` | | | | ## Events

table-centered_column_4

| Name | Parameters | Returns | |-----------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------| | `Activate` | | | | `Close` | | | | `ConstructContextualMenu` | Base As `MenuItem`, x As `Integer`, y As `Integer` | `Boolean` | | `ContextualMenuAction` | HitItem As `MenuItem` | `Boolean` | | `Deactivate` | | | | `DoubleClick` | X As `Integer`, Y As `Integer` | | | `DragEnter` | obj As `DragItem`, Action As `Integer` | `Boolean` | | `DragExit` | obj As `DragItem`, Action As `Integer` | | | `DragOver` | x As `Integer`, y As `Integer`, obj As `DragItem`, Action As `Integer` | `Boolean` | | `DropObject` | Obj As `DragItem` Action As `Integer` | | | `EnableMenuItems` | | | | `GotFocus` | | | | `KeyDown` | Key As `String` | `Boolean` | | `KeyUp` | Key As `String` | | | `LostFocus` | | | | `MouseDown` | x As `Integer`, y As `Integer` | `Boolean` | | `MouseDrag` | x As `Integer`, y As `Integer` | | | `MouseEnter` | | | | `MouseExit` | | | | `MouseMove` | X As `Integer`, Y As `Integer` | | | `MouseUp` | x As `Integer`, y As `Integer` | | | `MouseWheel` | X As `Integer`, Y As `Integer`, DeltaX As `Integer`, DeltaY As `Integer` | `Boolean` | | `Open` | | | | `Paint` | g As `Graphics`, areas() As `Rect` | | | `ScaleFactorChanged` | | | ## Property descriptions

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

forsearch

Canvas.Active **Active** As `Boolean` Indicates whether the `RectControl` is active. This property is read-only. Active is `False` when the `RectControl`'s window is not in the foreground. When a `Window` is deactivated, its controls are automatically deactivated unless `RectControl.AllowAutoDeactivate` is set to `False`.

forsearch

Canvas.AllowAutoDeactivate **AllowAutoDeactivate** As `Boolean` Determines whether the control should be deactivated (on macOS) when the parent window is deactivated. The default is `True`.

forsearch

Canvas.AllowFocus **AllowFocus** As `Boolean` If `True`, the Canvas will be included in the Tab order and can accept the focus. The `GotFocus` and `LostFocus` events are called at the appropriate times. This code enables the AllowFocus property. It is in the Open event of the control. ``` xojo Me.AllowFocus = True ```

forsearch

Canvas.AllowFocusRing **AllowFocusRing** As `Boolean` If `True`, the Canvas indicates that it has the focus with a ring around its border; if `False`, the appearance of the object does not change when it has the focus. Setting this property to `True` has no effect on Windows or Linux. The default is `True`. This code turns AllowFocusRing off. ``` xojo Me.AllowFocusRing = False ```

forsearch

Canvas.AllowTabs **AllowTabs** As `Boolean` If `True` and `AllowFocus` is `True`, then pressing Tab triggers the KeyDown event for processing. The default is `False`. If `False`, pressing the Tab key does not trigger the KeyDown event; pressing Tab triggers the LostFocus Event and selects the next object in the window that can accept the focus. The following turns on AllowTabs. ``` xojo Me.AllowTabs = True ```

forsearch

Canvas.AllowTabStop **AllowTabStop** As `Boolean` If `True`, the **RectControl** is in the Tab Order and accepts the focus when the user tabs into it. The default is `True`. If `False`, the user cannot tab into it to give it the focus. However, the **RectControl** can gain the focus by other means, such as the user's clicking on it or by setting the focus in code. This example removes the control from the Tab Order: ``` xojo Me.AllowTabStop = False ```

forsearch

Canvas.Backdrop **Backdrop** As `Picture` The passed `Picture` that will automatically be drawn into the area. You should not assign a new picture to the backdrop of the control when being inside the paint event of that control. This can lead into problems like the backdrop not being painted. The following code assigns a jpg image to the Backdrop. The image has been added to the project. The code is in the Open event. ``` xojo Me.BackDrop = HouseImage ```

forsearch

Canvas.Enabled **Enabled** As `Boolean` Determines if the control should be enabled when the owning window is opened. A disabled control cannot be clicked and cannot receive the focus. This example disables the control. Its caption is grayed out. ``` xojo Me.Enabled = False ```

forsearch

Canvas.Handle **Handle** As `Integer` Returns a handle to the control. This property is read-only. For interfacing with Mac APIs using `` Declare`s, RectControl.Handle returns NSViews (except for :doc:`Toolbar ``). On Windows returns the HWND of the control. On Linux it returns a GtkWidget. The following gets a handle to the control. ``` xojo Var i As Integer = Me.Handle ```

forsearch

Canvas.Height **Height** As `Integer` The height (in points) of the control. This example sets the height of the control to 100: ``` xojo Me.Height = 100 ```

forsearch

Canvas.Index **Index** As `Integer` If the control is used in a control set, this specifies the control's index in the set. This property is read-only. The *control set* is often used to manage a group of RadioButtons since a single RadioButton in a window doesn't make much sense. Most typically, you create an instance of the RadioButton, assign 0 to its Index property, and then duplicate it. This increments the value of Index for each new instance but retain the original control's name. To determine which RadioButton the user clicked, use the Action event handler of the control set. The parameter *Index* contains the value of Index for the RadioButton that was clicked. The event handler is this: ``` xojo Sub Action(Index As Integer) Label1.Text = "You chose radio button " + index.ToString + "." End Sub ``` To set a RadioButton in a control set, you use its *Index* property to refer to the RadioButton whose value you want to set. For example, the following line selects the second RadioButton from code: ``` xojo RadioButton1(1).Value = True ' 0-based ```

forsearch

Canvas.Left **Left** As `Integer` The left side of the control in local coordinates (relative to the window). The following example moves the control 100 points from the left side of the window: ``` xojo Me.Left = 150 ```

forsearch

Canvas.LockBottom **LockBottom** As `Boolean` Determines whether the bottom edge of the control should stay at a set distance from the bottom edge of the parent control, if there is one, or the owning window. This property can be set in the control's Inspector. The following example sets it in code. ``` xojo Me.LockBottom = True ```

forsearch

Canvas.LockLeft **LockLeft** As `Boolean` Determines whether the left edge of the control should stay at a set distance from the left edge of the parent control, if there is one, or the owning window. Beginning with version 2009r5, LockLeft and Locktop default to `True` when you add a new control to a window. Existing controls will be altered only if LockRight and/or LockBottom are not set. *LockLeft* has no effect unless *LockRight* is `True`. This property can be set in the control's Inspector. The following example sets it in code. ``` xojo Me.LockLeft = True ```

forsearch

Canvas.LockRight **LockRight** As `Boolean` Determines whether the right edge of the control should stay at a set distance from the right edge of the parent control, if there is one, or the owning window. This property can be set in the control's Inspector. The following example sets it in code. ``` xojo Me.LockRight = True ```

forsearch

Canvas.LockTop **LockTop** As `Boolean` Determines whether the top edge of the control should stay at a set distance from the top edge of the parent control, if there is one, or the owning window. Beginning with version 2009r5, LockTop and LockLeft default to `True` when you add a control to a window. Existing controls will be altered only if LockRight and/or LockBottom are not set. *LockTop* has no effect unless *LockBottom* is `True`. This property can be set in the control's Inspector. The following example sets it in code. ``` xojo Me.LockTop = True ```

forsearch

Canvas.MouseCursor **MouseCursor** As `MouseCursor` The cursor to be displayed while the mouse is within the control and both the `DesktopApplication` and `Window` class's MouseCursor properties are `Nil`. If the `DesktopApplication` class's MouseCursor property is not `Nil` or the `Window`'s MouseCursor property is not `Nil`, then any control's MouseCursor property is ignored. You can use a cursor stored in the `Cursors` module. On Macintosh, you can also obtain a `MouseCursor` from a resource file. This line in the Open event of the control sets the default cursor to the finger pointer. ``` xojo Me.MouseCursor = System.Cursors.FingerPointer ```

forsearch

Canvas.MouseX **MouseX** As `Integer` The X coordinate of the mouse (points). Measured from the top-left corner of the control. This property is read-only. This code is in the MouseDown event of a `TextField` and displays the X-coordinate at the point of the MouseDown event. ``` xojo Me.Value = Str(Me.MouseX) ```

forsearch

Canvas.MouseY **MouseY** As `Integer` The Y coordinate of the mouse (points). Measured from the top-left corner of the control. This property is read-only. This code is in the MouseDown event of a `TextField` and displays the Y-coordinate at the point of the MouseDown event. ``` xojo Me.Value = Str(Me.MouseY) ```

forsearch

Canvas.Name **Name** As `String` The name of the control. Set the name of the control in the Inspector. This property is read-only.

forsearch

Canvas.PanelIndex **PanelIndex** As `Integer` If the control has been placed on a `TabPanel` or `PagePanel` control, this is the panel (page/tab) that the control is on. If the control is not on a panel, it returns -1. The first panel is numbered zero. If the control has been placed on a panel of a `TabPanel` or `PagePanel` control, it returns the panel number. If the control is not on a `PagePanel` or `TabPanel`, it returns -1. If you change the PanelIndex to a nonexistent panel, the control will disappear until you give it a PanelIndex value that corresponds to a panel that exists. If you are looking to change the currently selected panel (page/tab), use `PagePanel.SelectedPanelIndex`. This code displays the panel index of the control that is on the page. ``` xojo Label3.Value = Str(Me.PanelIndex) ```

forsearch

Canvas.ScaleFactor **ScaleFactor** As `Double` The scale factor used when converting user space coordinates to backing store coordinates for the Canvas. This property is read-only.

forsearch

Canvas.Scope **Scope** As `Integer` Used to determine whether access to the control is Public (0) or Private (2). The default is Public. This property is read-only. If the Scope of a control is set to Private, it cannot be accessed from outside its parent window.

forsearch

Canvas.TabIndex **TabIndex** As `Integer` The **RectControl's** position in the Tab Order. It is 0-based. A TabIndex of 0 is the first **RectControl** to get the focus. On the Mac you need Full Keyboard Access turned on in System Preferences (Keyboard-\>Shortcuts) in order to manually set focus to non-text controls. This example sets the control's TabIndex. ``` xojo Me.TabIndex = 2 ```

forsearch

Canvas.Tooltip **Tooltip** As `String` Text of help message displayed as a Windows or Linux "tooltip" or macOS help tag. The tip/tag is displayed when the user hovers the mouse cursor over the control. This example adds a tooltip to a `BevelButton` that has an icon. ``` xojo Me.CaptionAlignment = 0 ' left Me.CaptionDelta = 10 Me.Tooltip = "Click to bark." Me.Icon = Woof ' added to the project Me.CaptionPosition = 2 ```

forsearch

Canvas.Top **Top** As `Integer` The top of the control in local coordinates (relative to the window). This example sets the top of the control to 140 points from the top of the window: ``` xojo Me.Top = 140 ```

forsearch

Canvas.TrueWindow **TrueWindow** As `Window` Returns a reference to the actual enclosing `Window`. This property is read-only. TrueWindow walks up the window hierarchy and finds the actual enclosing window regardless of how deeply nested the `RectControl` or `DesktopContainer` hierarchy is. `Window` also has a TrueWindow property. This example accesses the TrueWindow and displays its Title property in a `TextField`. ``` xojo TextField1.Text = Me.TrueWindow.Title ```

forsearch

Canvas.Visible **Visible** As `Boolean` Determines whether the control is visible when its owning window is opened. The default is `True`: the control is visible. The following code in the DisclosureTriangle Action event handler displays or hides a ListBox on the window: ``` xojo ListBox1.Value = Me.Visible ```

forsearch

Canvas.Width **Width** As `Integer` The width (in points) of the control. The following example resizes the control: ``` xojo Me.Width = 200 ```

forsearch

Canvas.Window **Window** As `Window` The control's parent window. This property is read-only. This code gets the parent window's Title property. ``` xojo TextField1.Text = Me.Window.Title ``` ## Method descriptions

forsearch

Canvas.AcceptFileDrop **AcceptFileDrop**(FileType As `String`) Permits documents of type *FileType* to be dropped on the control. *FileType* must be a file type that you defined in via the `FileType` class or the File Type Sets Editor. This code in the Open event of an `ImageWell` makes it possible for the user to drop either a picture or a file that is a jpeg image. The File Type Sets editor was used to define the “image/jpeg” file type. It is one of the “Common File Types” that is available in the editor. ``` xojo Me.AcceptPictureDrop Me.AcceptFileDrop("image/jpeg") ``` To restrict file drops to just folders (and not files), you can put this code in the `DragEnter` event: ``` xojo If Not obj.FolderItem.IsFolder Then Return True ```

forsearch

Canvas.AcceptPictureDrop **AcceptPictureDrop** Permits pictures to be dropped on the control. If a control should accept pictures in a drag and drop, then AcceptPictureDrop needs to be called prior to the drop. Typically, it is in the Open event of the control itself. For example, the line: ``` xojo Me.AcceptPictureDrop ``` in the Open event of the control that will receive the dragged pictures is needed. When the picture is dropped, the `DropObject` event is called and this is where you will put your code to handle the drop. Canvas.Open: ``` xojo Me.AcceptPictureDrop ``` Canvas.DropObject: ``` xojo If obj.PictureAvailable Then Me.Backdrop = obj.Picture End If ```

forsearch

Canvas.AcceptRawDataDrop **AcceptRawDataDrop**(Type As `String`) Permits data (of the Type specified) to be dropped on the control. The following specfies a generic file type defined in the File Type Sets editor. ``` xojo Me.AcceptRawDataDrop("????") ```

forsearch

Canvas.AcceptTextDrop **AcceptTextDrop** Permits text to be dropped on the control. This line in the Open event of a control that can accept dragged text. ``` xojo Me.AcceptTextDrop ```

forsearch

Canvas.Close **Close** Closes a control. Closing a control permanently removes the control from memory, making it impossible to access. You can close both non-indexed controls and indexed controls. When you close an indexed control, the indexes for the remaining controls will shift downward so that the indexes start with zero and are consecutive. The following code closes the control. When this is executed from a visible control, the control disappears from the window. ``` xojo Me.Close ```

forsearch

Canvas.DrawInto **DrawInto**(g As `Graphics`, x As `Integer`, y As `Integer`) Draws the contents of the RectControl into the specified `Graphics` context. The parameters *x* and *y* are the coordinates of the top, left corner. This method does not work with `HTMLViewer` and `OpenGLSurface`. This example draws the current control into the Graphics of a Picture and then displays it as the Backdrop of a \`Canvas\`: ``` xojo Var p As New Picture(Me.Width, Me.Height) Me.DrawInto(p.Graphics, 0, 0) Canvas1.Backdrop = p ```

forsearch

Canvas.Invalidate **Invalidate**(\[EraseBackground As `Boolean`\]) Similar to RefreshRect, but causes the specified region of the RectControl to be marked dirty and to be redrawn when the window contents need to be redrawn. The region to be redrawn is specified by the *X*, *Y*, *Width*, and *Height* parameters. This form of Invalidate was formerly called InvalidateRect. The following code refreshes the control. EraseBackground defaults to `True`. ``` xojo Me.Invalidate(False) ```

forsearch

Canvas.Refresh **Refresh**(eraseBackground As `Boolean`) Repaints the portion specified of the contents of the control immediately. Calling this frequently can cause the code executing to slow down. It is often preferable to call `RectControl.Invalidate` instead. Refresh the entire area: ``` xojo Me.Refresh(False) ``` Refresh a portion of the area: ``` xojo Me.Refresh(100, 150, 200, 300) ```

forsearch

Canvas.Scroll **Scroll**(DeltaX As `Integer`, DeltaY As `Integer`) Scrolls the Canvas contents according to the passed parameters. *DeltaX* and *DeltaY* are the number of points to scroll horizontally and vertically relative to the current position of the picture in the Canvas control. Positive values scroll right and down while negative values scroll left and up. The *Left*, *Top*, *Width,* and *Height* parameters specify the portion of the picture to be scrolled. If these are not passed, the entire picture will be scrolled. *ScrollControls* indicates whether controls positioned on top of the Canvas control should be scrolled as well. *ScrollControls* is `True` by default. To use the Scroll method to scroll the contents of a Canvas control, you need to store the last scroll value for the axis you are scrolling so you can use this to calculate the amount to scroll. This can be done by adding properties to the window that contains the Canvas control or by creating a new class based on the Canvas control that contains properties to hold the last X scroll amount and last Y scroll amount. If the *ScrollControls* parameter is `True`, any controls on top of the Canvas control will also be scrolled. This allows the implementation of a scrolling pane of controls. The following example scrolls a picture that was added to the project. The properties XScroll and YScroll have been added to the window to hold the amounts the picture has been scrolled. The picture is scrolled 8 points at a time. In the Keydown event of the window, the following code calls the Scroll method whenever the Up, Down, Left, or Right arrow keys are pressed. ``` xojo Const LeftArrow = 28 Const RightArrow = 29 Const UpArrow = 30 Const DownArrow = 31 Const ScrollUnit = 8 ' points Select Case Key.Asc Case LeftArrow XScroll = XScroll + ScrollUnit Canvas1.Scroll(ScrollUnit, 0) Case RightArrow XScroll = XScroll - ScrollUnit Canvas1.Scroll(-ScrollUnit, 0) Case UpArrow YScroll = YScroll + ScrollUnit Canvas1.Scroll(0, ScrollUnit) Case DownArrow YScroll = YScroll - ScrollUnit Canvas1.Scroll(0, -ScrollUnit) End Select ``` The Scroll method calls the Paint event of the Canvas that redraws the picture with the new values of XScroll and YScroll. The Paint event has the following line of code: ``` xojo g.DrawPicture(myPicture, XScroll, YScroll) ```

forsearch

Canvas.SetFocus **SetFocus** If applicable, sets the focus to the RectControl. KeyDown events are directed to the control. If the control cannot get the focus on the platform on which the application is running, SetFocus does nothing. The SetFocus method of the `Window` class or the `ClearFocus` method can be used to remove the focus from the control that currently has the focus, leaving no control with the focus. On the Mac you need Full Keyboard Access turned on in System Preferences (Keyboard-\>Shortcuts) in order to manually set focus to non-text controls. The following example sets the focus to TextField1. If another control has the focus when this line is executed, then the user sees that TextField1 gets the focus. ``` xojo TextField1.SetFocus ``` ## Event descriptions

forsearch

Canvas.Activate **Activate** The control is activated. In a single window interface, the Activate event fires when the parent window is activated. See the `DesktopApplication` and `Window` Activate events. This can be because the app is launched or a window belonging to another app is no longer frontmost (active). The Deactivate event fires when another window becomes active. In a single window interface, the Activate event fires when the window is activated, e.g., when the app first displays the window.

forsearch

Canvas.Close **Close** The control is about to close.

forsearch

Canvas.ConstructContextualMenu **ConstructContextualMenu**(Base As `MenuItem`, x As `Integer`, y As `Integer`) As `Boolean` This event is called when it is appropriate to display a contextual menu for the control. This event handler is the recommended way to handle contextual menus because this event figures out whether the user has requested the contextual menu, regardless of how they did it. Depending on platform, it might be in the MouseUp or MouseDown event and it might be a right+click or by pressing the contextual menu key on the keyboard, for example. *Base* is analogous to the menu bar for the contextual menu. Any items you add to *Base* will be shown as menu items. If you return `False`, the event is passed up the parent hierarchy. If you return `True`, the contextual menu is displayed. The parameters *x* and *y* are the mouse locations. If the event was fired because of a non-mouse event, then *x* and *y* are both set to -1. See the example of a contextual menu in the following section. The following ConstructContextualMenu event handler builds a menu with three menu items plus a submenu with three additional menu items. ``` xojo ' Add some items base.AddMenu(New MenuItem("Test 1")) base.AddMenu(New MenuItem("Test 2")) base.AddMenu(New MenuItem("Test 3")) ' Add a Separator base.AddMenu(New MenuItem(MenuItem.TextSeparator)) ' Add a sub menu Var submenu As New MenuItem("SubMenu") submenu.AddMenu(New MenuItem("SubMenu Test 1")) submenu.AddMenu(New MenuItem("SubMenu Test 2")) submenu.AddMenu(New MenuItem("SubMenu Test 3")) base.AddMenu(submenu) ' Add a Separator base.AddMenu(New MenuItem(MenuItem.TextSeparator)) Return True ```

forsearch

Canvas.ContextualMenuAction **ContextualMenuAction**(HitItem As `MenuItem`) As `Boolean` Fires when a contextual menuitem *hitItem* was selected but the Action event and the MenuHandler for the menuitem did not handle the menu selection. This event gives you a chance to handle the menu selection by inspecting the menuitem's Text or Tag properties to see which item was selected. Use this in conjunction with ConstructContextualMenu if you have not specified the Action event or the Menu Handler for the items on the contextual menu. See the example of a contextual menu in the examples for the **RectControl** class. `Return` `True` if this event has handled the item the user chose from the contextual menu. Returning `False` will cause the control's parent to execute its ContextualMenuAction event. This can be handy if you have the same contextual menu for several controls who share the same `Parent` (several on the same window for example). By returning `False` you can handle them all in a single event. This simple event handler displays the value of the selected menu item. ``` xojo If hitItem <> Nil Then MessageBox(hitItem.Value) Return True ```

forsearch

Canvas.Deactivate **Deactivate** The Canvas is deactivated. See the `DesktopApplication` and `Window` Deactivate events. In a multiple window interface, the Deactivate event fires when the parent window is deactivated because another window has been brought to the front or a window belonging to another app becomes frontmost. In a single window app, the Deactivate event fires when a window belonging to another app becomes frontmost.

forsearch

Canvas.DoubleClick **DoubleClick**(X As `Integer`, Y As `Integer`) The user has double-clicked at the passed cordinates (in pixels). The coordinates are relative to the top-left (0,0) point of the Canvas.This event fires even if you return `True` from the `MouseDown` event.

forsearch

Canvas.DragEnter **DragEnter**(obj As `DragItem`, Action As `Integer`) As `Boolean` Fires when the passed `DragItem` enters the RectControl. Returns a `Boolean`. Return `True` from this event to prevent the drop from occurring. The Action parameter specifies the drag action. It can take the following class constants of the `DragItem` class: | Value | Class Constant | |-------|--------------------------------------------------------------------| | 0 | `DragItem`.DragActionDefault | | 1 | `DragItem`.DragActionCopy | | 2 | `DragItem`.DragActionMove | | 3 | `DragItem`.DragActionLink | To restrict file drops to just folders (and not files), you can put this code in the DragEnter event: ``` xojo If Not obj.FolderItem.IsFolder Then Return True ```

forsearch

Canvas.DragExit **DragExit**(obj As `DragItem`, Action As `Integer`) Fires when the passed `DragItem` exits the RectControl. The *Obj* parameter is the item being dragged. The *Action* parameter specifies the drag action. It can take the following class constants of the `DragItem` class: | Value | Constant | |-------|--------------------------------------------------------------------| | 0 | `DragItem`.DragActionDefault | | 1 | `DragItem`.DragActionCopy | | 2 | `DragItem`.DragActionMove | | 3 | `DragItem`.DragActionLink |

forsearch

Canvas.DragOver **DragOver**(x As `Integer`, y As `Integer`, obj As `DragItem`, Action As `Integer`) As `Boolean` Fires when the `DragItem` is over the RectControl. The *Obj* parameter is the object being dragged. The coordinates x and y are relative to the **RectControl**. Returns a `Boolean`. Return `True` from this event to prevent the drop from occurring. The *Action* parameter specifies the drag action, which is typically done by holding down a modifier key (Shift, Alt, Option, Command, etc.) while doing the drag. It can take the following class constants of the `DragItem` class: | Value | Constant | |-------|--------------------------------------------------------------------| | 0 | `DragItem`.DragActionDefault | | 1 | `DragItem`.DragActionCopy | | 2 | `DragItem`.DragActionMove | | 3 | `DragItem`.DragActionLink |

forsearch

Canvas.DropObject **DropObject**(Obj As `DragItem` Action As `Integer`) The item represented by *Obj* has been dropped on the control. The *Obj* parameter is the object being dragged. The *Action* parameter specifies the drag action. It can take the following class constants of the `DragItem` class: | Value | Constant | |-------|--------------------------------------------------------------------| | 0 | `DragItem`.DragActionDefault | | 1 | `DragItem`.DragActionCopy | | 2 | `DragItem`.DragActionMove | | 3 | `DragItem`.DragActionLink | The following DropObject event handler can handle either a dropped picture or a dropped file. The type of file that it can handle needs to have been specified in a call to AcceptFileDrop prior to the drop, for example, in the Open event. ``` xojo If Obj.PictureAvailable Then Me.Image = obj.Picture ElseIf Obj.FolderItemAvailable Then Me.Image = Picture.Open(obj.FolderItem) End If ```

forsearch

Canvas.EnableMenuItems **EnableMenuItems** The Canvas control has received the focus. Menu handlers are invoked if the Canvas control has the focus. This event is only for use with menu items where you have set the `MenuItem.AutoEnabled` property to false. Otherwise, menu items are automatically enabled and disabled.

forsearch

Canvas.GotFocus **GotFocus** The Canvas has received the focus and has a selection rectangle around it. The AcceptFocus property must be set to `True` for the Canvas to be capable of getting the focus.

Note

On macOS, controls other than text fields and lists will accept focus only if the full keyboard access option is enabled in System Preferences/Keyboard.

forsearch

Canvas.KeyDown **KeyDown**(Key As `String`) As `Boolean` The user has pressed the *Key* passed while the `control` has the focus. How KeyDown works depends on the type of control. **TextField and TextArea** Returning `True` means the key is intercepted, preventing the key from actually reaching the control at all. This would be useful if you want to override the behavior of the tab key for example. Returning `False` means the key reaches the control. **All Other Controls** Returning `True` prevents the KeyDown event on the parent control (usually the window) from executing. Returning `False` results in the execution of the KeyDown event of the parent control.

forsearch

Canvas.KeyUp **KeyUp**(Key As `String`) Fires when the passed *Key* is released in the RectControl that has the focus. It is not guaranteed to be the same key that received the KeyDown event.

forsearch

Canvas.LostFocus **LostFocus** The Canvas has lost the focus. The AcceptFocus property must be set to `True` for the Canvas to be capable of getting then losing the focus.

Note

On macOS, controls other than text fields and lists will accept and lose focus only if the full keyboard access option is enabled in System Preferences/Keyboard.

forsearch

Canvas.MouseDown **MouseDown**(x As `Integer`, y As `Integer`) As `Boolean` The mouse button was pressed inside the control's region at the location passed in to *x*, *y*. The coordinates *x* and *y* are local to the control, i.e. they represent the position of the mouse click relative to the upper-left corner or the Canvas. `Return` `True` if you are going to handle the MouseDown. In such a case: - The Action event, if any, will not execute and the state of the object will not change. - You will receive the `MouseDrag` and `MouseUp` events. If you return False, the system handles the MouseDown so the `MouseDrag` and `MouseUp` event handlers do not get called. The MouseDown event uses the `DragItem` constructor when the user drags the contents of the control. It is: ``` xojo Var d As DragItem d = New DragItem(Self, Me.Left, Me.Top, Me.Width, Me.Height) d.Picture = Me.Image d.Drag ' Allow the drag ```

forsearch

Canvas.MouseDrag **MouseDrag**(x As `Integer`, y As `Integer`) This event fires continuously after the mouse button was pressed inside the Canvas. Mouse location is local to the control passed in to *x*, *y*.

Note

This event will not occur unless you return `True` in the `MouseDown` event first.

The parameters *x* and *y* are local coordinates, i.e. they represent the position of the mouse relative to the upper-left corner of the Canvas. As this event is fired continuously (hundreds of time per second), it is your responsibility to determine if the mouse has really moved.

forsearch

Canvas.MouseEnter **MouseEnter** The mouse has entered the area of the control.

forsearch

Canvas.MouseExit **MouseExit** The mouse has left the area of the control.

forsearch

Canvas.MouseMove **MouseMove**(X As `Integer`, Y As `Integer`) The mouse has moved within the control to the coordinates passed. The coordinates are local to the control, not to the window.

forsearch

Canvas.MouseUp **MouseUp**(x As `Integer`, y As `Integer`) The mouse button was released. Use the *x* and *y* parameters to determine if the mouse button was released within the control's boundaries.

Note

This event will not occur unless you return `True` in the MouseDown event. The return value is ignored.

The parameters *x* and *y* are local coordinates, i.e. they represent the position of the mouse click relative to the upper-left corner or the Canvas. Mouse clicks that are released to the left or above a control are negative.

forsearch

Canvas.MouseWheel **MouseWheel**(X As `Integer`, Y As `Integer`, DeltaX As `Integer`, DeltaY As `Integer`) As `Boolean` The mouse wheel has been moved. The parameters *X* and *Y* are the mouse coordinates relative to the control that has received the event. The parameters *DeltaX* and *DeltaY* hold the number of scroll lines the wheel has been moved horizontally and vertically, as defined by the operating system. *DeltaX* is positive when the user scrolls right and negative when scrolling to the left. *DeltaY* is positive when the user scrolls down and negative when scrolling up. Returns a `Boolean`. Return `True` to prevent the event from propagating further.

forsearch

Canvas.Open **Open** The control is about to be displayed. Use this event to initialize a control. The Open event is called after the Constructor. Be warned that initializing control property values using the Constructor instead of the Open event may result in those property values being overwritten by what is set in the Inspector. For best results, use the Open event for control initialization rather than the control Constructor. If the control is supposed to handle drag and drop, you need to tell it which type of item it needs to be able to handle. The following example informs the control that pictures and files can be dropped on it. The type of the file it needs to support is specified via the File Types Editor. ``` xojo Sub Open() Me.AcceptPictureDrop Me.AcceptFileDrop("JPEG") End Sub ```

forsearch

Canvas.Paint **Paint**(g As `Graphics`, areas() As `Rect`) The area needs to be redrawn, such as when it has been covered by another window and then uncovered. Use the g parameter for all drawing. The areas parameter contains the areas of the Canvas that need redrawing. If areas is empty then the entire Canvas needs to be redrawn. This code draws a 3D rectangle with a raised look: ``` xojo Sub Paint(g As Graphics) Const White = &cffffff Const DarkGray = &c8c8c8c Const LightGray = &cefefef g.DrawingColor = White g.DrawLine(1, 1, Me.Width, 1) g.DrawLine(1, Me.Height - 1, 1, 1) g.DrawingColor = DarkGray g.DrawLine(Me.Width - 1, 2, Me.Width - 1, Me.Height) g.DrawLine(1, Me.Height - 1, Me.Width, Me.Height - 1) //fill in the light gray rectangle g.DrawingColor = LightGray g.FillRectangle(2, 2, Me.Width - 3, Me.Height - 3) ``` This code uses the Paint event handler of a Canvas control to draw the text "The quick brown fox" in Helvetica bold, italic, 18 point, 50 points from the top of and 10 points from the left side of the control: ``` xojo Sub Paint(g As Graphics) g.Bold = True g.Italic = True g.FontName = "Helvetica" g.FontSize = 18 g.DrawText("The quick brown fox", 10, 50) ``` This code assigns the color of a particular point in a Canvas control to a variable: ``` xojo Sub Paint(g As Graphics) Var c As Color c = g.Pixel(10, 10) ``` This code sets a particular point of a Canvas control to a specific RGB value: ``` xojo Sub Paint(g As Graphics) g.Pixel(10, 10) =Color.RGB(100, 105, 225) ``` This is code draws a triangle in a Canvas. It is placed in the Paint event. The parameter g as `Graphics` is passed into this event: ``` xojo Sub Paint(g As Graphics) Var points(6) As Integer points(1) = 10 ' X of Point 1 points(2) = 10 ' Y of Point 1 points(3) = 75 ' X of Point 2 points(4) = 30 ' Y of Point 2 points(5) = 10 ' X of Point 3 points(6) = 125 ' Y of Point 3 g.DrawingColor =Color.RGB(100, 200, 255) ``` This code uses the Clip method to define child `Graphics` items within the parent Canvas. The code is in the Paint event of a Canvas. The two clippings define regions at the top of the Canvas and the DrawOval method draws object in each one. Notice that the first call tries to draw an oval that is wider than the region. It is truncated in the drawing. ``` xojo Sub Paint(g As Graphics) Var myClip As Graphics = g.Clip(0, 0, 150, 15) Var myClip2 As Graphics = g.Clip(150, 0, 150, 15) ' draw the border of the Canvas.. g.DrawingColor = &c000000 g.DrawRectangle(0, 0, g.Width, g.Height) ' draw into the first area... myClip.DrawingColor = &cff0000 myClip.DrawRectangle(0, 0, myClip.Width, myClip.Height) ' draw the border of the area.. myClip.DrawOval(0, 0, 200, 15) ' the oval does not appear outside the region despite the call ' draw into the second area... myClip2.DrawingColor = &c0000ff myClip2.DrawRectangle(0, 0, myClip2.Width, myClip2.Height) ' draw the border of the area myClip2.DrawOval(0, 0, 150, 15) ``` This simple Canvas control changes from black to white when you click on it. Drag a Canvas control into a window. Add a Boolean property (mBlack) to the Window. This is used toggle the color of the Canvas when it is clicked. The code for the Canvas MouseDown event handler looks like this: ``` xojo Function MouseDown(X As Integer, Y As Integer) As Boolean mBlack = Not mBlack ' Toggle the color Me.Invalidate(False) ' Tell the Canvas to draw itself End Function ``` This code toggles the mBlack value when the Canvas is clicked and then tells the Canvas to redraw itself. In the Paint event handler, you draw the rectangle setting the color based on the value of mBlack: ``` xojo Sub Paint(g As Graphics) If mBlack Then g.DrawingColor = &c000000 Else g.DrawingColor = &cffffff End If g.FillRectangle(0, 0, g.Width, g.Height) End Sub ``` Add the following functions to a class or module: ``` xojo Function IsWithinRect(left As Integer, top As Integer, width As Integer, height As Integer, rectangle As Rect) As Boolean left = Max (left, rectangle.Left) top = Max (top, rectangle.Top) Var right As Integer = Min(left + width, rectangle.Left + rectangle.Width) Var bottom As Integer = Min(top + height, rectangle.Top + rectangle.Height) Return (left < right) And (top < bottom) End Function Function IsWithinRects(left As Integer, top As Integer, width As Integer, height As Integer, rects() As Rect) As Boolean For Each r As Rect In rects If IsWithinRect(left, top, width, height, r) Then Return True End If Next End Function ``` With that, you can test if an object you want to draw within a particular position needs drawing at all, possibly speeding up the drawing process: ``` xojo Sub Paint(g As Graphics, areas() As Rect) ' Draw an image at position 100 / 100, but only if needed If areas.Ubound < 0 Or IsWithinRects(100, 100, theImage.Width, theImage.Height, areas) Then g.DrawPicture(theImage, 100, 100) End If ```

forsearch

Canvas.ScaleFactorChanged **ScaleFactorChanged** The backing store scale factor has changed and the Canvas should invalidate any cached bitmaps or other relevant state. If you have an Image Set with multiple images for HiDPI and want to split out each of the pictures it contains, you can do so like this: ``` xojo Var g As Graphics Var p, pics() As Picture ' Break the Image into its component pictures ' Also copy the horizontal/vertical resolution and scale factors ' so that the pictures draw properly when used later. For i As Integer = 0 To MyImageSet.ImageCount - 1 p = New Picture(MyImageSet.IndexedImage(i).Width, MyImageSet.IndexedImage(i).Height) p.HorizontalResolution = MyImageSet.IndexedImage(i).HorizontalResolution p.VerticalResolution = MyImageSet.IndexedImage(i).VerticalResolution pics.Add(p) g = p.Graphics g.ScaleX = p.HorizontalResolution / 72 g.ScaleY = p.VerticalResolution / 72 g.DrawPicture(MyImageSet.IndexedImage(i), 0, 0) Next ``` If you later modify the pictures in the array and want to recreate it as an image, you can do so using the constructor like this: ``` xojo ' Recreate the image from the component pictures p = New Picture(MyImageSet.Width, MyImageSet.Height, pics) ``` ## Notes Coordinates passed to Canvas events are local to the Canvas object. To use the Scroll method to scroll the picture in a Canvas control, you need to store the last scroll value for the axis you are scrolling so you can use this to calculate the amount to scroll. This can be done by adding properties to the window that contains the Canvas control or by creating a new class based on the Canvas control that contains properties to hold the last X scroll amount and last Y scroll amount. If the ScrollControls parameter is `True`, any controls on top of the Canvas control will also be scrolled. This allows the implementation of a scrolling pane of controls. The following example scrolls a picture that was added to the project. The properties XScroll and YScroll have been added to the window to hold the amounts the picture has been scrolled. The picture is scrolled 8 points at a time. In the Keydown event of the window, the following code calls the Scroll method whenever the Up, Down, Left, or Right arrow keys are pressed. ``` xojo Const LeftArrow = 28 Const RightArrow = 29 Const UpArrow = 30 Const DownArrow = 31 Const ScrollUnit = 8 ' points Select Case Key.Asc Case LeftArrow XScroll = XScroll + ScrollUnit Canvas1.Scroll ScrollUnit, 0 Case RightArrow XScroll = XScroll - ScrollUnit Canvas1.Scroll -ScrollUnit, 0 Case UpArrow YScroll = YScroll + ScrollUnit Canvas1.Scroll 0, ScrollUnit Case DownArrow YScroll = YScroll - ScrollUnit Canvas1.Scroll 0, -ScrollUnit End Select ``` The Scroll method calls the Paint event of the Canvas that redraws the picture with the new values of XScroll and YScroll. The Paint event has the following line of code: ``` xojo g.DrawPicture(myPicture, Xscroll, Yscroll) ``` ## Sample code This code in the Paint event handler draws a simple red line: ``` xojo g.DrawingColor = &cff0000 g.DrawLine(0, 10, 100, 100) ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- To draw a picture in a Canvas, use this code in the Paint event: ``` xojo g.DrawPicture(PictureAddedToProject, 0, 0) ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- This code (in the Paint event) draws a 3D rectangle with a raised look. ``` xojo Const White = &cffffff Const DarkGray = &c8c8c8c Const LightGray = &cefefef g.ForeColor = White g.DrawLine(1, 1, Me.Width, 1) g.DrawLine(1, Me.Height - 1, 1, 1) g.DrawingColor = DarkGray g.DrawLine(Me.Width - 1, 2, Me.Width - 1, Me.Height) g.DrawLine(1, Me.Height - 1, Me.Width, Me.Height - 1) //fill in the light gray rectangle g.DrawingColor = LightGray g.DrawFilledRectangle(2, 2, Me.Width - 3, Me.Height - 3) ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- This code draws a gradient from Red to Blue: ``` xojo Var startColor As Color = &cff0000 Var endColor As Color = &c0000ff Var p As New Picture(g.Width, g.Height) Var samt, eamt As Double For i As Integer = 0 To p.Height samt = 1 - (i / p.Height) eamt = i / p.Height p.Graphics.DrawingColor =Color.RGB((startColor.Red * samt) + (endColor.Red * eamt), _ (startColor.Green *samt) + (endColor.Green * eamt), _ (startColor.Blue * samt) + (endColor.Blue * eamt)) p.Graphics.DrawLine(-1, i, p.Width + 1, i) Next g.DrawPicture(p, 0, 0) ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- This code assigns a picture that has been added to the Project Editor to the Backdrop property in the Open event: ``` xojo Me.Backdrop = OSLogo ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- You can use the methods of the `Graphics` class to modify the picture in any way you like. For example, the following code in the object's Paint event handler adds a caption to the picture: ``` xojo g.FontName = "Arial" g.FontSize = 14 g.DrawingColor = &c0080C0 g.DrawText("Mary Jane", 10, 100) ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- If you instead assigned the graphic to the BackDrop property using the `Picture` constructor, as shown below, you could manipulate the graphic at the pixel level using the RGBSurface property of the `Picture` object. ``` xojo Me.Backdrop = New Picture(210, 30) Me.Backdrop.Graphics.DrawPicture(YourAppLogo, 0, 0) ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- See also the examples for the `Control` class, which give an example of dragging from a Canvas control and the `ImageWell` class example, which show drag and drop to and from the `ImageWell`.Image property. Unfortunately, a Focus Ring does not appear on Windows or Linux when a Canvas control gets the focus, but the GotFocus and LostFocus events fire normally. You can easily use them to simulate a focus ring. Create a property on the window called mHasFocus As Boolean. In the GotFocus event handler: ``` xojo mHasFocus = True Canvas1.Invalidate(False) ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- In the LostFocus event handler: ``` xojo mHasFocus = False Canvas1.Invalidate ``` --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- In the Paint event handler for Canvas1: ``` xojo #If TargetWindows Or TargetLinux Then If mHasFocus Then g.DrawingColor = HighlightColor ' or FrameColor, whichever you wish g.DrawRectangle(0, 0, Me.Width - 1, Me.Height - 1) Else g.DrawingColor =Color.RGB(178, 178, 178) ' gray g.DrawRectangle(0, 0, Me.Width - 1, Me.Height - 1) End If #EndIf ``` ## Compatibility All project types on all supported operating systems. ## See also `RectControl` parent class; `Graphics`, `Picture` classes