Skip to main content
Version: 1.6.0

Drawing Surfaces

Applications using two or three-dimensional drawing using TGI mainly use three components. Drawing surface, brushes and pens.

  • The surface is the area where objects are drawn. Graphics object is used to obtain a surface in TGI applications.
  • The brushes are the objects responsible for painting the backgrounds of the drawn objects. SolidBrush paints the background of the object according to the selected color. With different brush objects, you can paint backgrounds of graphic shapes different colors. We will detail these objects in terms of brushes.
  • Pens determine the color, width and style of shapes border lines. The border of an object can be a straight or dashed line, or it can be adjusted in different colors and thicknesses.

To draw graphical shapes on the screen with TGI, you need a pen and brush object that defines the texture, color and width of the object. For example, if you are going to draw a line or a triangle, you need to create a corresponding pen object.

The following code will draw a rectangle with one pixel width and black color on the screen and fill the inside with a yellow color. You can see the output below.

var tg = new Tuval.Graphics(200, 200);
tg.fillRectangle(Tuval.Pens.Yellow, 20, 20, 150, 100);
tg.drawRectangle(Tuval.Pens.Black, 20, 20, 150, 100);

{% iframe https://jsfiddle.net/tuvalframework/w6tx3gud/show %} Each drawing surface has four common features: width, height, resolution and color depth.

  • The width and height characteristics of a surface determine the size of the surface and are determined by the number of horizontal and vertical pixels, respectively.
  • The resolution of a surface is a measure of the output quality of the dots per inch (dpi) of graphic objects or images. For example, a 72 dpi resolution means that 1 inch of the surface holds 72 horizontal and 72 vertical pixels. For monitors and LCDs, resolution is often specified in terms of the number of horizontal and vertical total pixels rather than pixel density. Thus, a monitor resolution of 1280x1024 means that the monitor screen can hold 1,280 horizontal pixels and 1,024 vertical pixels.
  • The color depth of a surface is the number of colors used to represent each pixel. The color value in HTML5 applications is usually (255 255 255).

What is Pixel?​

A pixel is the smallest element that is involved in the drawing process to display graphic objects or images on the screen. The pixel density is usually represented by a value in dots per inch (dpi).

The quality of a pixel is directly proportional to the color depth. The Color class represents a color in TGI. It has four components: red, green, blue and alpha. The RGB (red-green-blue) components of the color represent the number of possible colors. Each component in RGB has 256 color combinations. Therefore, in TGI, all three components of each Color class represent 256x256x256 possible colors. The Alpha component determines the transparency of the color that affects the blend of the color with other colors.

In TGI, a drawing surface must support at least 24-bit color systems (for RGB components of a color object) to see the appropriate colors defined in the Color class; this means that each pixel of the surface must be able to hold 24 bits (8 bits each for R, G, and B components, as previously mentioned). Surfaces below 24 bits per pixel may not fully display the graph shapes and images as defined in a drawing application. In the following sections, we will discuss the colors in more detail.