homesciterGraphics
Graphics object

Represents graphic surface of the element.

Pretty much all methods return Graphic object itself allowing cascading of calls so following gfx.lineWidth(2).line(0,0,100,100)will draw 2px line from (0,0) to (100,100).

Constants
JOIN_MITER
JOIN_ROUND
JOIN_BEVEL
Join types, values of lineJoin property
CAP_BUTT
CAP_SQUARE
CAP_ROUND
Line cap type, values of lineCap property
ALIGN_LEFT
ALIGN_RIGHT
ALIGN_CENTER
horizontal alignment type, parameter values of textAlignment function
ALIGN_CENTER
ALIGN_TOP
ALIGN_BOTTOM
vertical alignment type, parameter values of textAlignment function
BLEND_ALPHA
BLEND_CLEAR
BLEND_SRC
BLEND_DST
BLEND_SRCOVER
BLEND_DSTOVER
BLEND_SRCIN
BLEND_DSTIN
BLEND_SRCOUT
BLEND_DSTOUT
BLEND_SRCATOP
BLEND_DSTATOP
BLEND_XOR
BLEND_ADD
BLEND_SUB
BLEND_MULTIPLY
BLEND_SCREEN
BLEND_OVERLAY
BLEND_DARKEN
BLEND_LIGHTEN
BLEND_COLORDODGE
BLEND_COLORBURN
BLEND_HARDLIGHT
BLEND_SOFTLIGHT
BLEND_DIFFERENCE
BLEND_EXCLUSION
BLEND_CONTRAST
blending type, values of blendMode and imageBlendMode properties
FILL_ONLY
STROKE_ONLY
STROKE_AND_FILL
FILL_BY_LINE_COLOR
drawPath flags.

Properties

lineJoin rw - integer, one of JOIN_xxx constants. Type of line join.
lineCap rw - integer, one of CAP_xxx constants. Type of line cap.
blendMode rw - integer, one of BLEND_xxx constants. Blend mode of drawing operations.
imageBlendMode rw - integer, one of BLEND_xxx constants. Blend mode of image renderings.
imageBlendColor rw - integer, color. Image blending color.

Static Methods

RGBA
(red:integer , green:integer, blue:integer [, alpha:integer|float (0.0 .. 1.0)]) :color or
(s:string) :color

Returns color rgba value. Example: var c = Graphics.RGBA(0xff,0,0); - pure red color or Graphics.RGBA("red"); or Graphics.RGBA("#ff0000");

Methods

constructor (non-creatable object)
clearAll
( [color: color] ): Graphics

Clears the graphics.

line
( x1:float, y1:float, x2:float, y2:float ) : Graphics

Draws line from x1,y1 to x2,y2 using current lineColor and lineGradient.

Shapes and Lines
triangle
( x1:float, y1:float, x2:float, y2:float, x3:float, y3:float ) : Graphics

Draws triangle using current lineColor/lineGradient and fillColor/fillGradient.

rectangle
( x:float, y:float, w:float, h:float ) or
( x:float, y:float, w:float, h:float, r:float ) or
( x:float, y:float, w:float, h:float, rx:float, ry:float ) or
( x:float, y:float, w:float, h:float, rx_top:float, ry_top:float, rx_bottom:float, ry_bottom:float ) : Graphics

Draws rectangle using current lineColor/lineGradient and fillColor/fillGradient with (optional) rounded corners.

ellipse
( x1:float, y1:float, r:float ) : Graphics or
( x1:float, y1:float, rx:float, ry:float ) : Graphics

Draws circle or ellipse using current lineColor/lineGradient and fillColor/fillGradient.

arc
( x1:float, y1:float, rx:float, ry:float, startAngle:float, endAngle:float ) : Graphics

Draws closed arc using current lineColor/lineGradient and fillColor/fillGradient.

star
( x1:float, y1:float, r1:float, r2:float, startAngle:float, numRays:integer ) : Graphics

Draws star using current lineColor/lineGradient and fillColor/fillGradient.

polygon
( x1:float, y1:float, x2:float, y2:float, .... ) : Graphics or
( v1:array, v2:array, .... ) : Graphics

Draws polygon using current lineColor/lineGradient and fillColor/fillGradient.

pointInPolygon
( x:float, y:float, polyX1:float, polyY1:float, polyX2:float, polyY2:float, ....  ): true | false or
( x:float, y:float, polygon:array ): true | false

Checks if point (x,y) is inside the polygon.

polyline
( x1:float, y1:float, x2:float, y2:float, .... ) : Graphics or
( v1:array, v2:array, .... ) : Graphics

Draws polyline (multi-segment line) using current lineColor/lineGradient and fillColor/fillGradient.

beginPath
( ) : Graphics

Starts new path.

Path primitives
moveTo
( x:float, y:float [, relative = false ] ) : Graphics

Moves current drawing path position to x,y. If relative is true then x and y are interpreted as deltas from the current path position.

lineTo
( x:float, y:float [, relative = false ] ) : Graphics

Draws line and moves current drawing path position to x,y. If relative is true then x and y are interpreted as deltas from the current path position.

hlineTo
( x:float [, relative = false ] ) : Graphics

Draws horizontal line and moves current drawing path position to x, (current)y. If relative is true then x is interpreted as a delta from the current path position.

vlineTo
( y:float [, relative = false ] ) : Graphics

Draws vertical line and moves current drawing path position to (current)x, y. If relative is true then y is interpreted as a delta from the current path position.

arcTo
( x:float, y:float, angle:float, rx:float, ry:float, largeArc:bool, sweep: bool [, relative = false ] ) : Graphics

(tbd)

ellipseTo
( x:float, y:float, rx:float, ry:float, [, clockwise = true ] ) : Graphics

(tbd)

quadraticCurveTo
( xc:float, yc:float , x:float, y:float [, relative = false ] ) : Graphics

(tbd)

bezierCurveTo
( xc1:float, yc1:float , xc2:float, yc2:float, x:float, y:float [, relative = false ] ) : Graphics

(tbd)

closePath
(  ) : Graphics

(tbd)

drawPath
( [flag:integer = Graphics.STROKE_AND_FILL] ) : Graphics

(tbd)

copyImage
( img:Image , x:float, y:float [, xIimg:integer, yImg:integer, wIimg:integer, hImg:integer ] ) : Graphics

Does bit-blit of the image pixels onto the graphics surface. No transformation applied to the image.

Image rendering
blendImage
( img:Image , x:float, y:float [, xIimg:integer, yImg:integer, wIimg:integer, hImg:integer ] [, alpha: float | integer] ) : Graphics

Blends img onto the graphics surface. Operation takes in account per pixel alpha of the imeage and optional alpha value. alpha here is either float [ 0.0 .. 1.0 ] or integer [ 0 .. 255 ].

drawImage
( img:Image , x:float, y:float [, w:float, h:float] [, xIimg:integer, yImg:integer, wIimg:integer, hImg:integer ] ) : Graphics

Draws img onto the graphics surface with current transformation applied (scale, rotation).

lineWidth
( width: float ) : Graphics

Set line width for subsequent drawings.

Line/Outline
and Fill
attributes
lineColor
( color: color ) : Graphics

Set line color for subsequent drawing operations.

noLine
() : Graphics

Disables line (outline) drawing.

fillColor
( color: color ) : Graphics

Set color for solid fills.

lineLinearGradient
( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of gradient linear of lines.

fillLinearGradient
( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of gradient linear fills.

lineRadialGradient
( x1: float, y1: float, r: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of gradient radial drawing of lines.

fillRadialGradient
( x1: float, y1: float, r: float, color1: rgba, color2: rgba [, p: float] ) : Graphics

Setup parameters of gradient radial fills.

fillEvenOdd
( even: true|false ) : Graphics

Set even/odd rule for polygon fills.

noFill
( ) : Graphics

Disables fills for subsequent drawing operations.

rotate
( radians: float ) : Graphics

Rotate coordinate system on radians angle.

Affine
transformations
scale
( xsc: float, ysc: float ) : Graphics

Scale coordinate system. xsc is the scale factor in the horizontal direction and ysc is the scale factor in the vertical direction. Both parameters must be positive numbers. Values smaller than 1.0 reduce the unit size and values larger than 1.0 increase the unit size.

translate
( x: float, y: float ) : Graphics

Move origin of coordinate system to the (x,y) point.

skew
( sx: float, sy: float ) : Graphics
Setup skewing (shearing) transformation.
screenToWorld
(r: number) : float
screenToWorld
(x: number, y: number) : (float, float)

These two functions translate coordinates from screen coordinate system to the one defined by rotate(),scale(), translate() and/or skew().

worldToScreen
(r: number) : float
worldToScreen
x: number, y: number) : (float, float)

These two functions translate coordinates from coordinate system defined by rotate(),scale(), translate() and/or skew() to screen coordinate system.

font
( name: string, size: float, [ bold: true|false, [ italic: true|false, [ angle: double, [ vector: true|false ]]]] ) : Graphics

Define font attributes for all subsequent text operations.

'vector' parameter is used only on Windows Mobile. If it is false then quality of rendering will be better but it will be impossible to rotate text, make it bold/italic. True by default.
Text output
text
( x: float, y: float, text: string ) : Graphics

Renders text string at position (x,y) with use of text alignment settings.

Note that text drawing is using line attributes for outlining each glyph and fill attributes to fill glyphs. If you need to draw text without outlining then put gfx.noLine(); gfx.fillColor( color(...) ); before calling gfx.text(...);

textAlignment
( horizontal: ALIGN_***, vertical: ALIGN_*** ) : Graphics

Sets text alignment in horizontal and vertical directions.

textWidth
( text: string ) : float

Calculates width of text string using current font.

fonts
( [template:string] ) : array of strings, class method (a.k.a. static method).

Returns array of strings - list of installed font names. template if defined is a template for font name. E.g. Graphics.fonts("Arial*") may return array like ["Arial", "Arial Black", "Arial Narrow"] on your OS.

save
( ) : Graphics

Saves current Graphics attributes on top of internal state stack.

State
restore
( ): Graphics

Restores Graphics attributes from top of internal state stack.

TBD.

Sciter

Documentation

Classes and objects
Download