A simple 2D drawing library to ease the use of the HTML5 Canvas API. Made with Typescript.
Open a command prompt or terminal and run
npm install graphical-engine
or
yarn add graphical-engine
Along with the <script>
tag/s containing your bundled code, you will need a canvas
element with an id of #canvas
.
You can use the following HTML template for new projects:
<!DOCTYPE html>
<html>
<head>
<title>graphical-engine Example</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="bundle.js"></script>
</body>
</html>
- parameters:
- description:
- This method resizes the canvas to the specified size, and simply draws a rectangle covering the entire canvas with the specified fill color.
- parameters:
- description:
- This methods draws a line connecting the 2 supplied vertices.
- parameters:
- description:
- This method draws a circle that can be filled or transparent with a border.
- parameters:
-
loc
- <Vector2> The center of the arc. -
radius
- <number> The radius of the arc in pixels. -
color
- <Color> The color of the arc. -
startAngle
- <number> The starting angle of the arc in radians. -
endAngle
- <number> The ending angle of the arc in radians. -
fill
- <boolean> Whether the arc should be filled. -
width
- <?number> The width of the arc border in pixels.1
by default.
-
- description:
- This method draws a circle sector (a 'slice of pie' shape). The starting and ending angles are in a clockwise order.
- parameters:
- description:
- This method draws a rectangle that can be filled or transparent with a border.
- parameters:
-
loc1
- <Vector2> The first vertex of the triangle. -
loc2
- <Vector2>The second vertex of the triangle. -
loc2
- <Vector2> The third vertex of the triangle. -
color
- <Color> The color of the triangle. -
fill
- <boolean> Whether the triangle should be filled. -
width
- <?number> The width of the triangle border in pixels.1
by default.
-
- description:
- This function draws a triangle connecting the 3 provided vertices. It can be filled or transparent with a border. The order of the vertices does not matter.
- description:
- This function simply calls
background()
, except the arguments are always the current canvas width and height, and the color used in the lastbackground()
call. It is used to clear the canvas.
- This function simply calls
- parameters:
-
absolute
- <?boolean> Whether the element should be centered absolutely, or usemargin: auto;
(in a flex parent).true
by default.
-
- description:
- This function is purely a DOM manipulation function: it centers the canvas element.
- parameters:
-
callback
- <function> The callback that gets executed upon app startup.
-
- description:
- The callback passed to this method is called once, on app startup. This is initialization and DOM methods should be ideally called, for performance reasons.
- parameters:
- description:
- This function initialises the main app loop. The provided callback is called every frame with the number of miliseconds between the previous and last frame.
canvas - <HTMLCanvasElement>
The canvas element.
ctx - <CanvasRenderingContext2D>
The 2D canvas rendering context.
CANVAS_WIDTH - <number>
The current width of the canvas element.
CANVAS_HEIGHT - <number>
The current height of the canvas element.
A 2D vector class that contains useful methods for creating and manipulating vectors.
-
static Vector2.from(v)
-
getDirection()
- Returns the angle from the X-axis to the vector.
- returns <number> - Angle in radians.
-
setDirection(radians)
- Sets the direction of the vector.
-
param
radians
- <number> Angle in radians.
-
getMagnitude()
- Gets the length of a vector from the origin.
- returns <number> - Length of vector.
-
setMagnitude(magnitude)
- Sets the vector's length.
-
param
magnitude
- <number> The number to set the vectors magnitude to.
-
add(v)
-
addAndMutate(v)
- Adds the argument vector to this vector.
-
param
v
- <Vector2> Another vector.
-
subtract(v)
-
subtractAndMutate(v)
- Subtracts the argument vector from this vector.
-
param
v
- <Vector2> Another vector.
-
multiply(scalar)
-
multiplyAndMutate(scalar)
- Multiplies this vector by the provided number.
-
param
scalar
- <number> The number by which to multiply this vector.
-
divide(scalar)
-
divideAndMutate(scalar)
- Divides this vector by the provided number.
-
param
scalar
- <number> The number by which to divide this vector.
-
absolute()
- Returns an absolute value of this vector. This essentially puts the vector into the first quadrant of the coordinate plane.
- returns <Vector2> - An absolute vector.
-
absoluteAndMutate()
- Makes this vector absolute.
-
copy()
- Returns a vector identical to this one.
- returns <Vector2> - A new vector.
-
toString()
- Returns a string representation of this vector.
- returns <string> - A string representing this vector.
-
toArray()
-
toObject()
- Returns an object representation of this vector.
- returns <Object> - An object representing this vector.
-
set(v)
- Sets this vector's coordinates to that of another vector.
-
param
v
- <Vector2> Another vector.
-
setCoords(x, y)
-
normalise()
- Returns the result of normalising this vector.
- returns <Vector2> - A normalised vector.
-
normaliseAndMutate()
- Normalises this vector.
-
normal(clockwise?)
An RGB/hex color class that contains useful methods for translating color formats.
-
static Color.RGBtoHex(r, g, b)
-
static Color.HexToRGB(hex)
-
getHex()
- Returns a Hex string representation of this Color object.
- returns <string> - A Hex color value string.
-
getRGB()
- Returns an RGB string representation of this Color object.
- returns <string> - An RGB color value string.
-
getRGBA()
- Returns an RGBA string representation of this Color object.
- returns <string> - An RGBA color value string.
-
setRGB(r, g, b, a?)
-
setHex(hex)
- Sets the RGBA values of this Color object to the supplied hex string.
-
param
hex
- <number> A hex color value string.
This project and all of its code are under the permissive MIT license. You can read more here: LICENSE