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).
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 pointUse the Index of Smart Routines to find examples of the use of most of these.
Drawing TextTwo 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.
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.
- Right click on the Resources folder in the tree view of the project at the top left of the Smart IDE.
- Click on Add Resource File(s).
- Browse to find your file (e.g. my_file.png) and open it.
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