Module gamejs/draw

Utilities for drawing geometrical objects to Surfaces. If you want to put images on the screen see gamejs/image.

There are several ways to specify colors. Whenever the docs says "valid #RGB string" you can pass in any of the following formats.

Example 

"#ff00ff"
    "rgb(255, 0, 255)"
    "rgba(255,0, 255, 1)"

See

gamejs/image

Functions

  • arc(surface, color, rect, startAngle, stopAngle, width)
  • bezierCurve(surface, color, startPos, endPos, ct1Pos, ct2Pos, width)
  • circle(surface, color, pos, radius, width)
  • line(surface, color, startPos, endPos, width)
  • lines(surface, color, closed, pointlist, width)
  • polygon(surface, color, pointlist, width)
  • quadraticCurve(surface, color, startPos, endPos, controlPos, width)
  • rect(surface, color, rect, width)

arc (surface, color, rect, startAngle, stopAngle, width)

Parameters

gamejs.Surface surface the Surface to draw on
String color a valid #RGB String, #ff00cc
gamejs.Rect rect the position and dimension attributes of this Rect will be used
Number startAngle
Number stopAngle
Number width the width of line, if 0 or not given the arc is filled.

bezierCurve (surface, color, startPos, endPos, ct1Pos, ct2Pos, width)

Draw a bezier curve with two control points on the surface. The control point positions define the shape of the bezier curve.

Parameters

gamejs.Surface surface the Surface to draw on
String color valid #RGB string, e.g., "#ff0000"
Array startPos [x, y] the start position for the bezier curve
Array endPos [x, y] the end position for the bezier curve
Array ct1Pos [x, y] position of the first control point
Array ct2Pos [x, y] position of the second control point
Number width of the bezier curve, defaults to 1

circle (surface, color, pos, radius, width)

Draw a circle on Surface

Parameters

gamejs.Surface surface the Surface to draw on
String color a valid #RGB String, #ff00cc
Array pos [x, y] position of the circle center
Number radius of the circle
Number width width of the circle, if not given or 0 the circle is filled

line (surface, color, startPos, endPos, width)

Parameters

gamejs.Surface surface the Surface to draw on
String color valid #RGB string, e.g., "#ff0000"
Array startPos [x, y] position of line start
Array endPos [x, y] position of line end
Number width of the line, defaults to 1

lines (surface, color, closed, pointlist, width)

Draw connected lines. Use this instead of indiviudal line() calls for better performance

Parameters

gamejs.Surface surface the Surface to draw on
String color a valid #RGB string, "#ff0000"
Boolean closed if true the last and first point are connected
Array pointlist holding array [x,y] arrays of points
Number width width of the lines, defaults to 1

polygon (surface, color, pointlist, width)

Draw a polygon on the surface. The pointlist argument are the vertices for the polygon.

Parameters

gamejs.Surface surface the Surface to draw on
String color a valid #RGB String, #ff00cc
Array pointlist array of vertices [x, y] of the polygon
Number width the width of line, if 0 or not given the polygon is filled.

quadraticCurve (surface, color, startPos, endPos, controlPos, width)

Draw a quadratic curve with one control point on the surface. The control point position defines the shape of the quadratic curve.

Parameters

gamejs.Surface surface the Surface to draw on
String color valid #RGB string, e.g., "#ff0000"
Array startPos [x, y] the start position for the quadratic curve
Array endPos [x, y] the end position for the quadratic curve
Array controlPos [x, y] position of the control point
Number width of the quadratic curve, defaults to 1

rect (surface, color, rect, width)

Parameters

gamejs.Surface surface the Surface to draw on
String color a valid #RGB String, #ff00cc
gamejs.Rect rect the position and dimension attributes of this Rect will be used
Number width the width of line drawing the Rect, if 0 or not given the Rect is filled.