How do I access the Canvas in Javascript?

Ask questions about how to create a script or swap scripts with other users.
Post Reply
PAEz
Posts: 3
Joined: 06 Aug 2009 13:43

How do I access the Canvas in Javascript?

Post by PAEz »

I can do it in pascal but I really wanted to do it in javascript, any small example would be really appreciated.
User avatar
Rickard Johansson
Site Admin
Posts: 6614
Joined: 19 Jul 2006 14:29

Post by Rickard Johansson »

Here is one:

Code: Select all

// Global variables
var f, b;

function ButtonClick(Sender) {
  DrawInCanvas("Hello World!");
}

function DrawInCanvas(s) {
  f.Canvas.Font.Height = 24;
  f.Canvas.TextOut(100,80,s);
  var h = f.Canvas.TextHeight("Tg");
  var w = f.Canvas.TextWidth(s);
  f.Canvas.Pen.Color = clRed;
  f.Canvas.Pen.Width = 5;
  f.Canvas.MoveTo(100, 80 + h + 4);
  f.Canvas.LineTo(100 + w, 80 + h + 4);
}

// Enter code here
{
  f = new TForm(nil);
  f.Caption = "Canvas test...";
  f.BorderStyle = bsDialog;
  f.Position = poScreenCenter;
  
  b = new TButton(f);
  b.Name = "Button1";
  b.Parent = f;
  b.SetBounds(10, 10, 95, 25);
  b.Caption = "Draw";

  b.OnClick = &ButtonClick;

  f.ShowModal;
  f.Free;
}
Post Reply