Advanced SKIA Graphics

Using CanvasKit By Erick Engelke

Note: To use this example you must have a licensed copy of my Nice Developer Kit (Dated January 17, 2024 or later)

SKIA is a graphics engine used in Chrome and available for a variety of languages including Delphi, and with this update, for EWB.

The advantages of SKIA are:

antialiased effects
speed
flexibility
use GPU functionality (GPU required)

In the JavaScript implementation, the graphics are compiled into Web Assembler, and are faster than JavaScript alone could offer, the web environment is called CanvasKit.

Sample Program

I’ve written a sample program which starts with a Hellow World sort of screen, then adds a paint program when you click on the button.

Sample Program

The source for the program can be found in my Nice toolkit under samples/skia

Here is the code for loading the library and doing the Hello World.

Hello World

You will need to include niceskia in your EWB uses statement for your graphics unit.

TForm2 = class( TForm )
      ckloaded : Tckloaded;
      paint, textpaint : TCKPaint;
      textFont : TCKTextFont;
      surface : TCKSurface;


      procedure FailLoad( Sender : TObject );

      procedure startskia( Sender : TObject );

      function CanvasKitHasLoaded( Canvas2 : TCanvasKit ):variant;

      function  drawFrame(canvas : TCanvasKit ):variant;

   public
      { Public declarations }
   end;

You need an OnShow handler which sets up the environment…

procedure TForm2.Form2Show(Sender: TObject);
begin
   // set up a CANVAS for SKIA to draw into
   htmllabel1.Content := '<canvas id="draw" width=500 height=500></canvas>';

   // fail if Internet BrainDead Explorer
   if isie then begin
      ShowMessage('Does not work in Internet Explorer, upgrade to a modern web browser');
      exit;
   end;

   // Load the library
   scriptskia := TScript.Create( self );
   scriptskia.OnLoad := startskia;
   scriptskia.OnError := failload;
   scriptskia.URL := 'https://unpkg.com/canvaskit-wasm@0.38.0/bin/full/canvaskit.js';  // 19 0.38.0
end;

Now, once CanvasKit is loaded, we start the SKIA/CanvasKit initialization code

procedure TForm2.startskia( Sender : TObject );
var
   KitInit : TCanvasKitInit;
   fnhasloaded : TCKfn;
begin
   // set up the EWB paint placeholder
   KitInit := TCanvasKitInit(CreateObject('new Object()'));
   KitInit.LocateFile := 'https://unpkg.com/canvaskit-wasm@0.38.0/bin/full/canvaskit.js';
   ckloaded := CanvasKitInit( KitInit );
   fnhasloaded := CanvasKitHasLoaded;
   ckLoaded.then(canvaskithasloaded);
end;

Now that the kit has loaded and initialized, call some user code that makes a "surface" and sets up a few things.

function TForm2.CanvasKitHasLoaded( Canvas2 : TCanvasKit ):variant;
begin
    SetupNiceExceptionHandling;
    CanvasKit := canvas2;
    try
       surface := CanvasKit.MakeCanvasSurface('draw');
       if not assigned( surface) then begin
          raise Exception.Create('Could not make surface');
       end;

       paint := TCKPaint(CreateObject('new CanvasKit.Paint()'));
       paint.setColor(CanvasKit.RED);
       textPaint := TCKPaint(CreateObject('new CanvasKit.Paint()'));
       textFont := TCKTextFont(CreateObject('new CanvasKit.Font(null, 20)'));
       surface.requestAnimationFrame(drawFrame);
   except on E:Exception do
       showmessage('ERROR: ' + e.message );
   end;
end;

Finally, draw the frame:

function  TForm2.drawFrame( canvas : TCanvasKit ): variant;
begin
   canvas.drawText('If you see this, CanvasKit loaded!!', 5, 200, textPaint, textFont);
   Button1.Visible := True;
end;

That’s a minimal Hello World with CanvasKit.

The demo program includes a little Paint-styled window you can try.