[SOLVED] canvas lazarus / 76-Pas2JS ---------------------------------------------------------------------- krolikbest · 2021-04-13 18:32 Hi,  i try to build web app using WCL as well as a pure pas2js (if i can call it that). Basically the second way (without using WCL) gives me more flexibility in using graphic objects like rectangles, arc, circle and so on. But to build some usable gui for my users it takes more effort in comparision to WCL. So my question - how to paint some graphic on canvas of TWform? Lets say: an arc, in pas2js i paint it on canvas in that way: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i   c:=TJSHTMLCanvasElement(document.createElement('canvas'));  ctx:=c.getContextAs2DContext('2d');  with ctx do  begin   beginPath;   linewidth:=7;   arc(50,90,40,pi,1.5*pi,false);   strokeStyle:='#FF0000';   stroke;  end;  with document.body do   appendChild(c);  but have no idea how to do it using WCL. Even if I add this code snippet in WButton OnClick procedure this won't show me graphic. I see created canvas in Chrome's console , but probably using Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i with document.body do   appendChild(c); makes it in wrong place or is so anyway bad idea.. So hmm.. Regards, ---------------------------------------------------------------------- krolikbest · 2021-04-14 17:03 So far I do Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     c1:=TJSHTMLCanvasElement(document.createElement('canvas'));    c1.width:=WPanel1.Width;    c1.height:=WPanel1.Height;    ctx:=TJSHTMLCanvasElement(c1).getContextAs2DContext('2d');    with ctx do    begin      beginPath;      linewidth:=7;      arc(50,90,40,pi,1.5*pi,false);      strokeStyle:='#FF0000';      stroke;    end;    TJSHTMLElement(document.getElementById('WPanel1')).appendChild(c1);    and that works, but this code above creates a tag in e.g. WPanel1 (a tag
), so in fact I paint on new tag called instead of WPanel's canvas. But if I run (under button.click) this code: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i   wpanel1.Canvas.MoveTo(10,10);  wpanel1.Canvas.LineTo(20,20);then I see next new tag within the tag
. It would be good to know how set ID for this tag since then I could do something like Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     c1:=TJSHTMLCanvasElement(document.getElementById("id of WPanel1.Canvas"));instead of Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     c1:=TJSHTMLCanvasElement(document.createElement('canvas')); Regards, ---------------------------------------------------------------------- krolikbest · 2021-04-14 18:09 Ok, that was simply: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     c1:=TJSHTMLCanvasElement(document.getElementsByTagName('canvas')[x]);  where x is just number of (in my example) wpanel. Solved. Tea time... ---------------------------------------------------------------------- PascalDragon · 2021-04-15 19:58 I've now added CanvasElement and ContextElement to TCanvas (the fields did already exist, but you couldn't trivially access them). Thus you can now simply do WPanel1.Canvas.ContextElement to access the HTML canvas. ---------------------------------------------------------------------- krolikbest · 2021-04-16 08:26 Nice. Actually I'm more and more convinced that user interface will be based on web browsers in near future and internet technology in general. ---------------------------------------------------------------------- krolikbest · 2021-04-16 14:32 Hi  @pascaldragon : I've downloaded and installed latest pas2js_widget. After loaded my project I got Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i Compile Project, OS: browser, CPU: ecmascript5, Target: project1.js: Exit code 6, Errors: 1webctrls.pas(856,42) Error: Incompatible type arg no. 3: Got "TFormatSettings", expected "Char" and there it is: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i function TWTimeEditBox.GetValue: TTime;begin  Result := StrToTimeDef(RealGetText, 0, FormatSettings);end;   Supposedly it's related to my Lazarus ver. 20.10 (Win64). Should I do/change something in the code? Regards, ---------------------------------------------------------------------- krolikbest · 2021-04-16 16:25 Never mind. changed to Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i function TWTimeEditBox.GetValue: TTime;begin  Result := StrToTimeDef(RealGetText, 0, FormatSettings.DateSeparator);end; Is OK now. ---------------------------------------------------------------------- PascalDragon · 2021-04-17 08:42 Quote from: krolikbest on April 16, 2021, 06:25:39 pmNever mind. changed to Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i function TWTimeEditBox.GetValue: TTime;begin  Result := StrToTimeDef(RealGetText, 0, FormatSettings.DateSeparator);end; Is OK now. Seems like the overload of StrToTimeDef with TFormatSettings is only available in the development version of pas2js. I've now applied your change so that it compiles with 2.0.0 again as well. ---------------------------------------------------------------------- yus · 2021-04-18 11:41 Quote from: krolikbest on April 16, 2021, 06:25:39 pmNever mind. changed to Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i function TWTimeEditBox.GetValue: TTime;begin  Result := StrToTimeDef(RealGetText, 0, FormatSettings.DateSeparator);end; Is OK now. Sorry, but for TWTimeEditBox you need change FormatSettings.DateSeparator -> FormatSettings.TimeSeparator https://github.com/pascaldragon/Pas2JS_Widget/pull/5#issue-617449926