Skip to main content

class Graphics

Class Graphics represents 2D graphics primitives.

In Sciter.JS Graphics is available :

  1. at <canvas> element where it represents its offscreen buffer.
  2. in element.paintXXXX(graphics) methods to support so called immediate mode painting.
  3. in new Image(painter(graphics)) constructor to draw on Image surface.

Class Graphics also is a namespace that contains classes:

Properties:

lineCap

The shape used to draw the end points of lines (strokes).

read-write, string, one of

  • "butt" - default,
  • "round",
  • "square"

lineJoin

the shape used to join two line segments where they meet.

read-write, string, one of

  • "miter" - default,
  • "round",
  • "bevel"

strokeStyle

read-write, either

  • Color - color to draw stroke / line;
  • string - string representation of a color or a gradient;
  • Brush - brush (gradient, tiled image, etc.);

lineWidth

strokeWidth

read-write, number, line width (in CSS pixels, a.k.a. dips).

fillStyle

read-write, either

  • Color - color to fill;
  • string - string representation of a color or a gradient;
  • Brush - brush (gradient, tiled image, etc.);

font

read-write, string, in CSS font attribute format

Methods:

setLineDash()

sets configuration of dashed line

graphics.setLineDash(n1,n2,...)

beginPath()

starts a new path by emptying the list of sub-paths.

graphics.beginPath()

moveTo()

graphics.moveTo(x, y)
graphics.moveTo(Point)

lineTo()

graphics.lineTo(x, y)
graphics.lineTo(Point)

quadraticCurveTo()

adds a quadratic Bézier curve to the current sub-path.

graphics.quadraticCurveTo(cpx, cpy, x, y)
graphics.quadraticCurveTo(cp:Point, pt:Point)

bezierCurveTo()

adds a cubic Bézier curve to the current sub-path.

graphics.bezierCurveTo(p1x, cp1y, cp2x, cp2y, x, y)
graphics.bezierCurveTo(cp1:Point, cp2:Point, pt:Point)

arcTo()

adds a circular arc to the current sub-path, using the given control points and radius. The arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters.

graphics.arcTo(x1, y1, x2, y2, radius)
graphics.arcTo(cp1:Point, cp2:Point, radius)

arc()

adds a circular arc to the current sub-path.

graphics.arc(x, y, radius, startAngle, endAngle [, anticlockwise])

ellipse()

graphics.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise])

rect()

graphics.rect(x, y, width, height)
graphics.rect(Rect)

closePath()

adds a straight line from the current point to the start of the current sub-path. If the path has already been closed or has only one point, this function does nothing.

graphics.closePath()

stroke()

graphics.stroke()

strokes current path.

graphics.stroke(path)

strokes given Path object.

fill()

graphics.fill()

fills current path.

graphics.fill(path[,fillRule])

fills given Path object.

fillRule is one of:

strokeRect()

draws a rectangle that is stroked (outlined) according to the current strokeStyle and other Graphics settings.

graphics.strokeRect(x,y,w,h)
graphics.strokeRect(Rect)

fillRect()

draws a rectangle filled according to the current fillStyle.

graphics.fillRect(x,y,w,h)
graphics.fillRect(Rect)

clearRect()

erases pixels in a rectangular area by setting them to transparent black.

graphics.clearRect(x,y,w,h);
graphics.clearRect(Rect);

fillText()

draws a text string at the specified coordinates, filling the string's characters with the current fillStyle.

graphics.fillText(text,x,y,maxWidth)
tip

In case of dynamic updates or frequent drawing of the same text it is better to create/reuse Graphics.Text and use graphics.draw() method to draw it.


save()

saves the entire state of the graphics by pushing the current state onto a stack.

graphics.save()

restore()

restores the most recently saved canvas state by popping the top entry in the drawing state stack.

graphics.restore()

scale()

adds a horizontal and vertical scaling to the current transformation matrix.

graphics.scale(x,y)

translate()

adds a translation to the current transformation matrix.

graphics.translate(x,y)

rotate()

graphics.rotate(angle [,x,y])

adds a rotation to the current transformation matrix.

parameters:

  • angle, either number of radians or Angle;
  • x,y, if given defines center of rotation;

transform()

multiplies the current transformation with the matrix described by the arguments of this method.

graphics.transform(a,b,c,d,e,f)

setTransform()

resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method.

graphics.setTransform(a,b,c,d,e,f)

resetTransform()

resets (overrides) the current transformation to the identity matrix.

graphics.resetTransform()

Methods (Sciter.JS specific):

draw()

graphics.draw(path, {params})

draws given path object, params is an object with:

  • x, y - numbers, destination coordinates;
  • fill, optional, "evenodd" | "nonzero", if defined fills the path by current fill brush;
  • stroke, optional, true | false, if true - outlines the path by current stroke brush;
graphics.draw(image, {params})

draws the image object, params is an object with:

  • x, y - numbers, destination coordinates;
  • width ,height - optional, numbers, dimension of destination box;
  • srcX, srcY - optional, integer, origin of source box (sprite);
  • srcWidth, srcHeight - optional, integer, dimension of source box (sprite);
  • opacity, optional, 0.0 ... 1.0 , opacity (blending);
graphics.draw(text, {params})

draws the text object, params is an object with:

  • x, y - numbers, destination coordinates;
  • alignment: integer, 1..9, defines meaning of x/y coordinates, see NUMPAD. 5 - center of text, 7 - left/top corner, etc.
  • fill : Color, optional, if defined text is draw by that color. If ommited then by current fill color.

pushLayer()

graphics.pushLayer(x,y,w,h[,opacity|filter])

Pushes the layer(clip) on layers stack with rectangular clip with optional opacity or filter.

parameters:

  • x,y,w,h - rectangle;
  • opacity - number, in range 0.0 ... 1.0 - draw content of the layer with the opacity;
  • filter - string, filter in CSS filter property format;
graphics.pushLayer(clipAreaName[,opacity | filter])

Element's area clip with optional opacity. clipAreaName is one of:

  • "background-area" - element background area accounting border-radius;
  • "border-box",
  • "padding-box",
  • "margin-box",
  • "content-box"
graphics.pushLayer(path [,opacity])

push Path clip layer with optional opacity.

graphics.pushLayer(mask:Image, useAlpha [,opacity] )

push Image mask clip layer with optional opacity.

If useAlpha is true then alpha value is used as a mask value. Otherwise non-black pixels define the mask.

popLayer()

Pops layer created by most recent pushLayer().