WebCanvas resize is incredibly slow

Targets Web
1

Hi,

i have a WebCanvas, where I draw some lines and Strings. That works fine.

But if I want to resize it, for example like canvas1.width = canvas1.width + 200 then it takes ca. 4 seconds to paint it again.

What is my mistake?

My code is quite simple: (you can paste it 1:1 into the paint-event of a webcanvas)

  
  dim Stunde as Double = me.Width / 13
  dim HalbeStunde as Double = Stunde / 2
  dim ViertelStunde as Double = HalbeStunde / 2
  
  
  g.PenWidth = 1
  g.ForeColor = &c979797
  
  ' DRAWING
  for i as integer = 0 to 14
    
    dim x1 as Double = i * Stunde
    dim y1 as Double = 0
    dim x2 as Double = i * Stunde
    dim y2 as Double = me.Height
    
    'Stunde malen
    g.DrawLine(x1, y1, x2, y2 )
    g.ClearRect(x1 + 0.01, y1, x2 + 0.01, y2)
    
    'ViertelStunden1 malen
    g.DrawLine(x1 + ViertelStunde, y1 + (3 * (me.Height / 4)), x2 + ViertelStunde, y2)
    g.ClearRect(x1 + ViertelStunde + 0.01, y1 + (3 * (me.Height / 4)), x2 + ViertelStunde + 0.01, y2)
    
    
    'HalbeStunden malen
    g.DrawLine(x1 + HalbeStunde, y1 + (me.Height / 2), x2 + HalbeStunde, y2 )
    g.ClearRect(x1 + HalbeStunde + 0.01, y1 + (me.Height / 2), x2 + HalbeStunde + 0.01, y2 )
    
    
    'ViertelStunden2 malen
    g.DrawLine(x1 + HalbeStunde + ViertelStunde, y1 + (3 * (me.Height / 4)), x2 + HalbeStunde + ViertelStunde, y2 )
    g.ClearRect(x1 + HalbeStunde + ViertelStunde + 0.01, y1 + (3 * (me.Height / 4)), x2 + HalbeStunde + ViertelStunde + 0.01, y2 )
    
    'StundenZahlen malen
    g.TextSize = 18
    g.DrawString(cstr(i + 5), x1 + 2, y1 + 20)
    
    'HalbeStundenZahlen malen
    g.TextSize = 10
    g.DrawString("30", x1 + 2 + HalbeStunde, y1 + 10 + (me.Height / 2))
    
    'ViertelStundenZahlen malen, wenn genug platz
    if me.Width > 800 then
      g.DrawString("15", x1 + 2 + ViertelStunde, y1 + 10  + (3 * (me.Height / 4)))
      g.DrawString("45", x1 + 2 + HalbeStunde + ViertelStunde, y1 + 10  + (3 * (me.Height / 4)))
    end if
    
  next
2

If I use the anchors, it renders quickly!

3

no ideas? :frowning:

4

Dynamically created pictures do not work with drawpicture in webgraphics, so using a picture and rescale it is not possible.

If the picture is fixed, you may want to create a large one, drag it into the project, and drawPicture it to size. The alternative is to dump the canvas and use an ImageWell. It does work with dynamic pictures, so you can use Xojo resize.

There was a thread not long ago about that particular problem.

5

Hi Michel,

I don’t draw a picture within the Canvas. I only draw some lines and strings. The positions of the lines are dependent to the width of the canvas. So if I change the size of the Canvas, it has to be redrawn and thas very slow!

6

[quote=140965:@Lars Lehmann]Hi Michel,

I don’t draw a picture within the Canvas. I only draw some lines and strings. The positions of the lines are dependent to the width of the canvas. So if I change the size of the Canvas, it has to be redrawn and thas very slow![/quote]

I understand. Picture is synonymous to image or drawing. Ultimately what will be displayed in the browser is a picture.

Instead of drawing the thing each time the Paint occurs, create a big image once and for all, and resize it to fit in Paint. That is all I say. It will be instant instead of taking forever. By the way it seems all drawing is VERY slow : a fillrect takes two seconds. That looks like a major bug.

7

Okay!

Understood. But, it’s not really an alternative, it’s more like a work-around.

If I resize a picture, the lines will be thicker or thinner and it will not look professional.

What I wonder is: if I dock the canvas to WebPage, and I change the page-size, then it works fast and perfectly. Also the initial loading is very fast…

Another Bug is, that I couldn’t dock a Canvas on a container - if I wanna resize the container…

It’s driving me nuts!!!

8

[quote=140971:@Lars Lehmann]Okay!

Understood. But, it’s not really an alternative, it’s more like a work-around.

If I resize a picture, the lines will be thicker or thinner and it will not look professional.

What I wonder is: if I dock the canvas to WebPage, and I change the page-size, then it works fast and perfectly. Also the initial loading is very fast…

Another Bug is, that I couldn’t dock a Canvas on a container - if I wanna resize the container…

It’s driving me nuts!!![/quote]

Workarounds are the substance of computing.

Open your mind a little. Instead of thinking small picture and blurry enlargement, draw your original picture at 4 times the maximum size of the canvas, and scale it down instead of up. I guarantee you the result will look professional.

The container control generates an error with a canvas inside. Not good.

9

Yeah! this error is strange!
it occurs not every time, and I don’t know when…

really not good

10

[quote=140962:@Michel Bujardet]Dynamically created pictures do not work with drawpicture in webgraphics, so using a picture and rescale it is not possible.

If the picture is fixed, you may want to create a large one, drag it into the project, and drawPicture it to size. The alternative is to dump the canvas and use an ImageWell. It does work with dynamic pictures, so you can use Xojo resize.

There was a thread not long ago about that particular problem.[/quote]
This is NOT the same as drawing a picture. I would be much happier if when you talk about WebCanvas that you actually understood what was going on under the hood first!

11

[quote=140979:@Lars Lehmann]Yeah! this error is strange!
it occurs not every time, and I don’t know when…

really not good[/quote]
Lars, do me a favor and file a bug report with a sample project. We did a resizable canvas for the XDC app last year and I don’t recall having resizing speed problems.

12

Okay I’ll make a sample-project. But I want to post it here, because I’m not using the feedback-tool.

Also, I have now a work-around for my problems:
It seems that the error is occurring when the canvas is embedded at design-time. So I put it into a web container and embed it at runtime to the correct position and size. Then I store the container in a variable.

So I can close it, and ever I want to resize it, I close the old and embed a new Container-Canvas.

13

Why so much aggressivity ?

14

Another Problem (once we are here):

The WebCanvas do only draw with 2pt or 3pt thickness. If I set g.penwidth to 1px - nothing happens, the Lines are thick.

My Workaround is to remove a part of the thick lines with ClearRect…

15

Because the WebCanvas does not draw a picture and then send it to the browser.

The way it actually works is it takes every drawing command that you put into the paint event and converts that into a script. If it is not the first drawing that was done, it performs a diff against the previous script and then compares the size of the two scripts to determine which one to send, depending on which is smaller.

The script that is sent is typically tiny in comparison to the amount of data created… unless you are changing the entire canvas with every paint event.

I just don’t want people getting the impression that we’re drawing a picture behind the scenes and sending that down to the browser. The only time any pictures are sent is if you use DrawPicture.

The more likely scenario is a combination of latency (if your app is on the Internet) and commands getting out of order. Because we are using diff, the changes need to be applied in the same order they were created to work properly. He commands are serialized, and if they get out of sequence, the framework starts over from a fresh full version of the script.

16

May I ask why you are not using Feedback?

17

good question… :smiley:

If it’s better for you, I’ll install Feedback and post the example there! :wink:

18

[quote=141002:@Greg O’Lone]Because the WebCanvas does not draw a picture and then send it to the browser.

The way it actually works is it takes every drawing command that you put into the paint event and converts that into a script. If it is not the first drawing that was done, it performs a diff against the previous script and then compares the size of the two scripts to determine which one to send, depending on which is smaller.

The script that is sent is typically tiny in comparison to the amount of data created… unless you are changing the entire canvas with every paint event.

I just don’t want people getting the impression that we’re drawing a picture behind the scenes and sending that down to the browser. The only time any pictures are sent is if you use DrawPicture.

The more likely scenario is a combination of latency (if your app is on the Internet) and commands getting out of order. Because we are using diff, the changes need to be applied in the same order they were created to work properly. He commands are serialized, and if they get out of sequence, the framework starts over from a fresh full version of the script.[/quote]

When you share your knowledge in this fashion, you make it a lot easier to appreciate your posts.

19

[quote=141007:@Lars Lehmann]good question… :smiley:

If it’s better for you, I’ll install Feedback and post the example there! ;)[/quote]
I’d prefer that. It gives us something to work on that persists. Projects that get posted elsewhere usually get deleted over time. We also have a better chance of fixing your bug by working with your sample and your explanations.

20

I really try to do that. There is a lot of the framework that I can’t explain for various reasons (like intellectual property).

I’m just trying to make sure no one is led down the wrong path because of a lack of knowledge of the underlying mechanism. I’d much rather you guys ask Xojo.