RectControl → Control → Object

Canvas Class

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.

Events
EnableMenuItems
GotFocus
KeyDown
LostFocus
MouseDown
MouseDrag
MouseUp
Paint

Properties
AcceptFocus
AcceptTabs
Backdrop
EraseBackground
Graphics
UseFocusRing

Methods
Scroll

# Notes

Because this is a RectControl, see the RectControl class for other properties and events that are common to all RectControl objects.

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 a property 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.

# Examples

This example draws a 3D rectangle with a raised look.

Sub Paint(g as Graphics)
g.forecolor= RGB(255, 255, 255) //white
g.drawline 1,1,canvas1.width,1
g.drawline 1,canvas1.height-1,1,1
g.forecolor= RGB(140,140,140) //dark gray
g.drawline canvas1.width-1,2,canvas1.width-1,canvas1.height
g.drawline 1,canvas1.height-1,canvas1.width,canvas1.height-1
//fill in the light gray rectangle
g.forecolor= RGB(239,239,239)
g.fillrect 2,2,canvas1.width-3,canvas1.height-3

This example assigns a picture that has been added to the Project Editor to the Backdrop property:

Me.backdrop=OSLogo

You can then 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:

Me. Graphics.TextFont="Helvetica"
Me. Graphics.TextSize=14
Me. Graphics.ForeColor= RGB(255,255,255)
Me. Graphics.DrawString "Joe Bob",10,100

If you instead assigned the graphic to the BackDrop property using NewPicture, as shown below, you could manipulate the graphic at the pixel level using the RGBSurface property of the Picture object.

Me.backdrop= NewPicture(210,30,32)
Me.backdrop. Graphics.DrawPicture madeWithREALbasicLogo,0,0

See also the examples for the Control class, which gives 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.

Simulating a Focus Ring on Windows and Linux

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.

In the GotFocus event, use:

#If TargetWin32 or TargetLinux
Me. Graphics.forecolor= HighlightColor //or FrameColor, whichever you wish
Me. Graphics.DrawRect 0,0,me.width-1,me.height-1
#endif

In the LostFocus event, use:

#If TargetWin32
Me. Graphics.forecolor= RGB(178,178,178) //gray
Me. Graphics.DrawRect 0,0,me.width-1,me.height-1
#endif

# See Also

Graphics, Picture classes; NewPicture function.