Drawing Routines

Introduction

The Smart graphics routines are based on the JavaScript drawing routines. See Primož Gabrijelčič's Demo Graphics in the A Smart Book Demos folder for the finer points, including gradient painting and the display of sharp lines by drawing to the centre of a pixel. We cover the routines you are most likely to use. Usually (but not when drawing text or rectangles) you need to construct a path to display even a single line. This typical code segment draws a green triangle with black edges:
Canvas.FillStyle := 'green';
Canvas.StrokeStyle := 'black';
Canvas.BeginPath;
Canvas.MoveToF(50, 50);
Canvas.LineToF(50, 100);
Canvas.LineToF(100, 50);
Canvas.ClosePath;
Canvas.Fill;
Canvas.Stroke;

ClosePath joins the first point in the path to the last. (Many programs use the routine when it is unnecessary; you can begin a new path without closing the existing one).

Drawing Shapes

You can achieve much with the following Canvas procedures for drawing shapes, but see the W3Graphics unit for others if necessary.
procedure FillRectF(aLeft, aTop, aWidth, aHeight: Float); 
procedure FillBounds(aLeft, aTop, aRight, aBottom: Float);
procedure StrokeRectF(aLeft, aTop, aWidth, aHeight: Float);
procedure LineF(x1, y1, x2, y2: Float);
procedure MoveToF(x, y: Float);
procedure LineToF(x, y: Float);
procedure Ellipse(x1, y1, x2, y2 : Float);
procedure ArcF(x, y, radius, startAngle, endAngle: Float; anticlockwise: Boolean);
procedure QuadraticCurveToF(cpx, cpy, x, y: Float); //cp represents control point    
Use the Index of Smart Routines to find examples of the use of most of these.

Drawing Text

Two Canvas procedures to use are:
procedure FillTextF(text: String; x, y, maxWidth: Float);
procedure StrokeTextF(text: String; x, y, maxWidth: Float); overload;    

See our demonstration of drawing text with different fonts and styles.

Drawing Images

You can store small images as strings to ensure that they are available immediately.

Put large images in the res folder, load them (and give them time to load) as follows.

  1. Right click on the Resources folder in the tree view of the project at the top left of the Smart IDE.
  2. Click on Add Resource File(s).
  3. Browse to find your file (e.g. my_file.png) and open it.
See loading resources for the declaration of the variable (or, more precisely, field) FImage of type TW3Image then instantiation and loading with the code:
FImage := TW3Image.Create(nil);
FImage.LoadFromURL('res/sms_ide.png');    

The demonstration provides time for resources to load by using a splash screen. Alternatively, in a canvas game project such as the web version of Knowledge, you can display some text and/or graphics for the first n frames.

Finally, you are ready to display all of the image with

procedure DrawImageF(imageHandle: THandle; x, y: Float);
or part of it with
procedure DrawImageF(imageHandle: THandle; sx, sy, sw, sh, dx, dy, dw, dh: Float); 
//s and d represent source and destination
Programming - a skill for life!

Useful for games, with drawing routines (including transforms and text fonts), images, sprites and WebGL 3D graphics. Now includes Box2D physics and rendering by Pixi.js.