The vanishing canvas

39460 - WebCanvas becomes invisible when changing size

Run the attached project. When moving the slider, the width and height of the WebCanvas increases or decreases. Towards the right of the slider, somehow at random, between 330 and 350, the WebCanvas becomes invisible. Usually, to evidence that takes modifying rapidly the value of the slider around these values, and after 10 iterations of so, the canvas vanishes. Not always at the same value.

<https://xojo.com/issue/39460>

It looks like what is broken is not the HTML, which does appear fine in the developer console of Chrome, but the code that draws onto the canvas. I applied a light blue style to the WebCanvas in the project I am attaching, and that never disappears. But the canvas fails to draw.

That is a real annoying bug, since its random nature makes it impossible to work around.

I have the same major problem in 2017R2.1. It appears to be random. I created a control set with a container control that handles the display of numerous widgets. Because I want the app to run seamlessly on Desktop and Mobile devices I calculate the sizes and then scale the Canvas to the size of the container control. It behaves in a total Random fashion in most browsers I have tested which makes it a big problem and cost me a lot of reloads just to test a simple piece of code.

[quote=189707:@Michel Bujardet]39460 - WebCanvas becomes invisible when changing size

Run the attached project. When moving the slider, the width and height of the WebCanvas increases or decreases. Towards the right of the slider, somehow at random, between 330 and 350, the WebCanvas becomes invisible. Usually, to evidence that takes modifying rapidly the value of the slider around these values, and after 10 iterations of so, the canvas vanishes. Not always at the same value.

<https://xojo.com/issue/39460>

It looks like what is broken is not the HTML, which does appear fine in the developer console of Chrome, but the code that draws onto the canvas. I applied a light blue style to the WebCanvas in the project I am attaching, and that never disappears. But the canvas fails to draw.

That is a real annoying bug, since its random nature makes it impossible to work around.[/quote]

@Michel Bujardet
Did you ever find a workaround for this problem?

[quote=359332:@Rudolph Thomas]@Michel Bujardet
Did you ever find a workaround for this problem?[/quote]

The only way I found was to use a picture displayed in a WebImageView instead.

I am not quite sure the issue is with the Xojo version of the Canvas itself, since it uses a DIV containing the HTML canvas.

It could be due to the HTML Canvas itself.

@Michel Bujardet

In my view, the canvas should use less data than pushing images which is why I want to use it instead. I agree with the DIV and HTML but when all browsers tend to fail with this task the finger slowly but sure tend to point back to the source which is XOJO. I Tested on Android, Android Tablet, FireFox, Chrome, and iOS. All of them fail in the same manner. I Am building a responsive app that must resize and redraw container controls. Inside each container, I have a timer and a canvas. The timer fires redraw actions with the Invalidate method. Once started that portion seems to work 100% fine. The problem for me started when I moved from statically drawn container controls to a control set that I resize as required for the current display area.

I Have a test app running. If you could confirm if the behavior is the same that would be awesome. In many cases, the app will launch fine. When start resizing the browser to force a layout change the widgets will fail, showing white blocks at random. Once in this state, the canvas will not be shown again. After reloading the widgets will randomly still fail to display properly.

Leave the username and password as is. Just click login
http://apps.tigme.com/cgi/siotr-dash/siotr-dash.cgi

ps. I lock the canvas (all 4 sides) inside the container control. If I dynamically size the container the canvas stays stuck in the locked size. So I have to resize the Canvas with code