Skip to main content
Version: 1.6.0

TGI from HTML5 Canvas Perspective

Nowadays, if you are going to write a graphical application that will run on the browsers, you have a few aternative surfaces. These are;

  • HLM5 Canvas 2D Context;
  • WebGL
  • SVG

Up to this section, we talked about the differences between the HTML5 Canvas element and TGI. If we are to bring these differences together;

  • TGI has an object-oriented structure.
  • The graphics output environment is independent. (2d context, WebGL, SVG)
  • Allows you to create your own objects from existing objects.
  • It allows overloading of methods and features.
  • Includes many graphical and mathematical helper objects.

Drawing with HTML5 Canvas API​

With the HTML5 Canvas API, we want to draw a line with a red color and 3 pixel thickness. To do this, you must first add a canvas element to your web page.

<canvas id="canvasId" width="200" height="200"></canvas>

Then you need to take the surface from which you can draw this canvas element.

var ctx = document.getElementById("canvasId").getContext("2d");

Then we can determine the color and thickness of the line we want to draw and draw the line with the line method.

ctx.strokeStyle = "#FF0000";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 200);
ctx.stroke();

Let's see the same example in TGI:

var tg = new Tuval.Graphics(200, 200);
var redPen = new Tuval.Pen(Tuval.Color.Red, 3);
g.drawLine(redPen, 20, 20, 200, 200);

{% iframe https://jsfiddle.net/tuvalframework/zvuea5qg/show %} As we have seen, in addition to writing a small number of codes, the readability and integrity of our code has increased.

Object Oriented Approach​

If you compare the HTML5 Canvas API and the TGI API, you will find that the TGI api model is more flexible, easy to use and more object oriented. HTML5 Canvas API provides methods for drawing graphic objects; TGI API provides objects. Each graphic component is an object. For example, in TGI, a pen is represented by a Pen object, unlike strokeStyle and lineWidth in Canvas.

Overloading Object Methods​

TGI object methods have many overloaded formats to give developers greater flexibility. For example, the drawRectangle procedure has four overloaded formats:

public drawRectangle(pen: Pen, rect: RectangleF, mode?: RectangleModes): void;
public drawRectangle(pen: Pen, rect: RectangleF, tl: number, tr?: number, br?: number, bl?: number, mode?: RectangleModes): void;
public drawRectangle(pen: Pen, x1: float, y1: float, w: float, h: float, mode?: RectangleModes): void;
public drawRectangle(pen: Pen, x1: float, y1: float, w: float, h: float, tl: number, tr?: number, br?: number, bl?: number, mode?: RectangleModes): void;

Drawing and Filling Methods​

Drawing and filling can be compared to writing and painting. As you type, you use a pencil to draw symbols of lines and curves. Painting is the process in which you get a brush, dip it in a color, and fill in colored areas.

In TGI, the Graphics class provides separate drawing and filling methods. For example, the drawRectangle method takes a Pen object and draws out a rectangle outline. The fillRectangle routine takes a Brush object and fills the rectangle with the specified brush. You can view the code below.

var tg = new Tuval.Graphics(200,200);
var pen = new Tuval.Pen(Tuval.Color.Red, 3);
var htchBrush = new Tuval.HatchBrush(Tuval.HatchStyle.Cross, Tuval.Color.Red, Tuval.Color.Blue);
tg.drawRectangle(pn, 50, 50, 100, 100);
tg.fillRectangle(htchBrush, 20, 20, 200, 200);

{% iframe https://jsfiddle.net/tuvalframework/6vsomLr8/show %} The drawing and filling methods will be discussed in detail later.