Possible to say port LCL Custom Drawn to HTML5 Canvas?
lazarus / 76-Pas2JS

----------------------------------------------------------------------
kveroneau · 2022-01-01 19:33

I know it's a long shot, but since custom drawn technically doesn't
use any OS-dependent widgetset and instead draws everything itself,
would it be possible to say implement each widget in this interface
using a HTML5 Canvas for each widget, or for the entire form?  Sure,
at this point it wouldn't really be an "HTML Form" application, but
porting actual LCL applications which use this Interface would be
easy.

I can see that existing Pas2JS widget libraries seem to be using
regular HTML controls, alongside CSS to style them.  While this is a
great approach, it will make incorporating some of the more complex
LCL widgets in pure HTML a bit difficult.  I think trying to port the
LCL Custom Drawn Interface to Pas2JS using an HTML5 Canvas might be a
great idea to get the ball rolling faster.  With this Interface we
wouldn't need to sacrifice as much when porting Lazarus programs over
to the Web.  It will also enable much more complex functionalities and
control over say using an HTML-based form solution.

The first approach is to use a separate HTML5 Canvas for each LCL
Custom Drawn widget.  This will make it possible to still design site
using HTML and CSS, and we could re-use existing HTML elements. 
Although, this will mean slightly less control over the presentation,
as each widget is them fully contained in the HTML5 Canvas drawing
area.

The second approach is to make the TForm literally the HTML5 Canvas,
and we draw each widget as it is seen in the Designer onto the HTML5
Canvas.  This enables the TForm to look almost exactly the same in
every single browser and device.  A Window event in the browser could
trigger the TForm.onResize event, and would work exactly as it does in
desktop Lazarus apps, so the app will be-able to scale to various
form-factors, just as we currently do on the Desktop and on Android.

I believe the second approach will lead to a much better developer and
end-user experience.  If a developer say doesn't want a end-user to
easily copy text and images from the Application, this is 100% do-able
with using a full page HTML5 Canvas TForm, as it will work just as it
does in a Desktop app.

Anyways, what do you guys think of this?  And has this been discussed
before?

Quick Edit: I noticed that I brought this up before actually.  
https://forum.lazarus.freepascal.org/index.php/topic,44735.0.html