× CodeTyphon Web Development Pas2JS, WASM, etc, discussions and problems

# Question Canvas Example in JS Web GUI Web Browser Application

• Dan Eller
• Topic Author
• Offline
• New Member
10 months 1 week ago #16073 by Dan Eller

Hi,
Not sure if anybody would want this, but I converted the classic Canvas drawing example to run as a JS GUI Web Brower Application in CT 7.5 . Enjoy!
-Dan Eller

unit Unit1;

{\$mode objfpc}{\$H+}

interface

uses
JS, Classes, SysUtils, Graphics, Controls, Forms, Dialogs, WebCtrls,math;

type

{ TWForm1 }

TWForm1 = class(TWForm)
WTimer1: TWTimer;
procedure FormCreate(Sender: TObject);
procedure FormResize(Sender: TObject);
procedure WTimer1Timer(Sender: TObject);
procedure FormPaint();
procedure RotatePoints();

private

public

end;

type
TRPoint = record

X,Y:Real;

end;

var
WForm1: TWForm1;

PointCount, MaxPoints:integer;
Rotation:Real;

Points: array [0..15] of TRPoint;

implementation

{\$R *.frm}

{ TWForm1 }

procedure TWForm1.FormCreate(Sender: TObject);
begin
Canvas.Pen.Color := clGreen;
Rotation := 0;
MaxPoints:=15;
PointCount := MaxPoints;
RotatePoints();
end;

procedure TWForm1.FormResize(Sender: TObject);
begin
Invalidate();
FormPaint();

end;

procedure TWForm1.WTimer1Timer(Sender: TObject);
begin
RotatePoints();
Invalidate();
FormPaint();
end;

procedure TWForm1.RotatePoints();
var
M_2PI,StepAngle,j:Real;
i:integer;

begin
M_2PI:=2 * PI;
StepAngle:=M_2PI / PointCount;
Rotation :=Rotation+ PI / 1024;
if Rotation > StepAngle then
begin
Rotation  :=-StepAngle;
end;
i:=0;
j:=Rotation;
while i<PointCount do

begin
j:=j+StepAngle;
i:=i+1;
Points.X :=cos(j);
Points.Y :=sin(j);
end;

end;

procedure TWForm1.FormPaint();
var
begin

Canvas.Clear;
centerX := Width div 2;
centerY := Height div 2;

for i := 0 to PointCount do
begin
for j:=i+1 to PointCount do
begin

end;
end;

end;

end.

The following user(s) said Thank You: Darth Florus

• Sternas Stefanos
• Offline
• Moderator
• Ex Pilot, M.Sc, Ph.D
10 months 1 week ago #16074 by Sternas Stefanos
Replied by Sternas Stefanos on topic Canvas Example in JS Web GUI Web Browser Application
Thanks Sir
if you want to put your code to CodeOcean,
please attach the full project here

PilotLogic Architect and Core Programmer

• Dan Eller
• Topic Author
• Offline
• New Member
10 months 1 week ago #16075 by Dan Eller

#### File Attachment:

File Name: ct_jsgui_canvas.7z
File Size:451 KB

Okay, here are the project files. Hope they can help someone in CodeOcean.
-Dan Eller
##### Attachments:

• Dan Eller
• Topic Author
• Offline
• New Member
10 months 1 week ago #16076 by Dan Eller
Screenshot of the example running on Tablet web browser.

##### Attachments:

• Sternas Stefanos
• Offline
• Moderator
• Ex Pilot, M.Sc, Ph.D
10 months 1 week ago #16077 by Sternas Stefanos
Replied by Sternas Stefanos on topic Canvas Example in JS Web GUI Web Browser Application
Thanks Sir

PilotLogic Architect and Core Programmer