Canvas Questions

How can I use Canvas?
I create one Canvas and one Button. At the Button-Action-Event, I try to paint into the Canvas:

canvas1.ForeColor = rgb(200,30,50)
canvas1.DrawLine(1, 1, 100,100)
But that doesn’t work.
What do I wrong?

You use the canvas paint event.

Alternatively draw to a picture and draw that picture in the canvas paint event. Has the advantage that you can also print the picture to the printer.

My recommendation: Read the SuperDraw article in xDev 12.5. It will seriously be one of the best investmens you ever made.

I sit here many hours and cannot understand the canvas.
Please can someone give an easy example how to use canvas?
I want push a button and then to something with the canvas.

If I push the putton how to use the canvas paint event? I really don’t understand.

Ich sehe gerade, du bist Deutscher, Markus.
Wo finde ich dieses xDev 12.5 und was ist das?

[quote=370493:@Stefan Scholz]I sit here many hours and cannot understand the canvas.
Please can someone give an easy example how to use canvas?
I want push a button and then to something with the canvas.

If I push the putton how to use the canvas paint event? I really don’t understand.[/quote]

In the Paint Event of the Canvas, you do all the painting using the Graphics (g) Property.
In the Action Event of your Button you just call Canvas.Invalidate to trigger the Paint Event. The Paint Event of the Canvas will automatically trigger in various situations like a resizing f.e…

It’s really simple once you get used to it.

The canvas is drawn only in the Paint event. You need to provide enough information in the form of environment variables (properties of the window or a module) to tell the canvas what to paint. Suppose you have 2 pictures, a tree and a lake. You might create a property on the window named, DrawATree of type Boolean. Then you might have 2 buttons, one labeled “Draw Tree” and the other labeled “Draw Lake”. In the first button you would have

DrawATree = True
Canvas1.Invalidate

In the other button you would have

DrawATree = False
Canvas1.Invalidate

In the Canvas Paint event you would have

if DrawATree then
    g.DrawPicture(Tree, 0, 0)
else 
   g.DrawPicture(Lake, 0, 0)
end

You can extend the idea infinitely.

1 Like

Tim Hare, you are the best!! Now I understand. Thank you very much!

I am repeating what Tim is saying, but bringing it back to the example you started with. We will go through it step by step in case things remain unclear.

Put this code in the Canvas1 Paint event (with no code in Button1 at the moment)

g.ForeColor = RGB(200,30,50) g.DrawLine(1, 1, 100,100)

What will happen? Well as soon as the window containing the Canvas1 shows up then the Red line will be visible. Button1 is doing nothing. When the window opens, the Paint event of the Canvas is invoked.

Perhaps you do not want the line to show up until you push the button. So create a property of the window (lineVisible As Boolean)

In the Canvas1 Paint event (Still no code in Button1 at the moment)

If Self.lineVisible Then g.ForeColor = RGB(200,30,50) g.DrawLine(1, 1, 100,100) End If

What will happen? Self.lineVisible will default to False. The Paint event fires when the window opens but the If statement directs the code flow away from drawing the line and the canvas remains empty. You will not see the Red Line.

Next put this in the Action event of Button 1

Self.lineVisible = True

Now try it again. When the window opens, the canvas is empty as before. Now click on the button. What happens? Well nothing actually, because the Paint event was invoked when the window opened but has not subsequently been invoked. You have changed the property Self.lineVisible but you have to tell the canvas that you want its Paint event to occur again now that you have changed the property (Self.lineVisible).

The Paint event needs to be invoked. This is done by adding a line to the code of the Action event of Button 1

Self.lineVisible = True Self.Canvas1.Invalidate \\\\ This will make the Canvas1 Paint event occur

Now when you click on the button, the red line will appear. Self.Canvas1.Invalidate makes the Paint event of the Canvas1 occur.

[quote=370494:@Stefan Scholz]Ich sehe gerade, du bist Deutscher, Markus.
Wo finde ich dieses xDev 12.5 und was ist das?[/quote]
xDev ist das Xojo Developer Magazine. War ursprünglich REALbasic Developer Magazine.

http://www.rbdeveloper.com

Über den Klick auf der Seite kommt man zu GumTree wo man das Pdf bestellen kann.

Ich hatte auch meine Schwierigkeiten mit dem Canvas (und Tim kratzt nur an der Oberfläche) aber der SuperDraw Artikel beschreibt wie man den Canvas objekt-orientiert nutzt. Vergiß zum Beispiel die Properties von Tim gleich wieder. In Superdraw hast du eine Basisklasse für zu zeichnende Objekte die weiß wie man sie auswählt, bewegt, usw. Dann machst du für zu zeichnende Objekte (zB Rechteck, Stern, Kreis, Text) Unterklassen die festlegen wie sie gezeichnet werden. Der Canvas hat dann ein Array von diesen Unterklassen und schickt jedem der Arraymitglieder die Nachricht “zeichne dich”.

Sehr einfach zu erweitern oder zu modifizieren.

Hmm, looks not very easy. It is very heavy to use the canvas. How can I delete a canvas Picture?
I am looking to paint a picture and than to put it into a webimage. That seem easier. What is faster?
To paint with a webcanvas or to paint with a webimage?

There are two ways to do graphics.

One is like a bitmap paint program where you simply paint the pixels. The canvas is like a wall and you have a paint brush. So to delete the canvas picture you need to paint over it.

The other is like a vector graphic program where you treat each item you draw as a separate object. You can move them around, resize them, layer them, change their colour, etc. To delete one object (like a picture) you simply remove it from the list of objects that should be drawn.

Which way you need to go depends on what you want to achieve, but most of the time the second is better (and MUCH more powerful).

But reading over your posts: have you actually read the free Introduction to Programming book from Xojo? Because not being aware that all canvas drawing is being done in the paint event of the canvas suggests not.

The discussion so far has been about Canvas, the Desktop control. Webcanvas is a different thing entirely. Are you doing a Desktop app or a Web app?