Turtle graphics on canvas
Sample
import Turtle from './turtle.js';
window.addEventListener('load', () => {
const turtle = Turtle.create({
width: 300,
height: 300
});
document.body.append(turtle.canvas);
turtle
.setColor(Turtle.COLORS.RED)
.rotate(45)
.line(100)
.rotate(-90)
.line(50)
.execute('rotate 45')
.execute('line 10')
;
console.log(turtle, `${turtle}`);
});
Turtle
Constructor
| Parameter |
Default |
Description & restrictions |
Size size |
NULL |
Canvas size in pixels (rewrites width and height). |
Integer width |
100 |
Canvas width in pixels; must be greater than 1. |
Integer height |
100 |
Canvas height in pixels; must be greater than 1. |
Position position |
NULL |
Start position (rewrites startX and startY). |
Integer startX |
1 |
Start horizonatal position from top/left; must be greater than 0. |
Integer startY |
1 |
Start vertical position from top/left; must be greater than 0. |
String measure |
Turtle.DEGREES |
Angle measure (degrees, radians and so on; see constants of Angle). |
Angle|Number angle |
0 |
Start angle; number; 0 is horizontal from left to right; clockwise rotation. |
Color|String color |
Turtle.COLORS.BLACK |
Line color in HEX (sample #123456) or Color-object. |
Color|String background |
Turtle.COLORS.WHITE |
Fill color in HEX (sample #123456) or Color-object. |
Constants
| Constant |
Description |
Object COLORS |
Proxy to Color.LIST |
String DEGREES |
Proxy to Angle.DEGREES |
String RADIANS |
Proxy to Angle.RADIANS |
String CLOCK_H |
Proxy to Angle.CLOCK_H |
String CLOCK_M |
Proxy to Angle.CLOCK_M |
Integer MIN_X |
Proxy to Command.MIN_X |
Integer MIN_Y |
Proxy to Command.MIN_Y |
Properties
| Property |
Description |
String uuid |
Unique identifier of this object (see Uuid) |
Size size |
Canvas size |
Integer width |
Proxy to this.size.width |
Integer height |
Proxy to this.size.height |
Position position |
Current position |
Integer x |
Proxy to this.size.position.x |
Integer y |
Proxy to this.size.position.y |
Angle angle |
Current angle/direction |
Color color |
Current line color |
Color background |
Current fill color |
Object colors |
Colors: { String color, String background } |
Array[String] commands |
Applied commands list |
Object parameters |
All parameters: { uuid, size, position, angle, colors, commands } |
HTMLCanvasElement canvas |
Canvas |
Statics
| Method |
Description |
self create(Object parameters = {}) |
Static constructor |
Position newPosition(Integer x, Integer y) |
Proxy to new Position() |
Angle newAngle(Angle|Number angle, String measure = null) |
Proxy to new Angle() |
Color newColor(String color) |
Proxy to new Color() |
Color newRGB(Integer red, Integer green, Integer blue) |
Proxy to Color.fromRGB() |
Color newHSL(Number hue, Number saturation, Number lightness) |
Proxy to Color.fromHSL() |
Command newCommand (String command, Array params = []) |
Proxy to new Command() |
Methods
| Method |
Description |
this setLogger(Function logger = undefined) |
Set logger with params (Turtle turtle, String command) |
this reset() |
Reset all turtle params to start |
this setAngle(Angle|Number angle, String measure = null) |
Set new angle |
this setColor(Color|String color) |
Set new line color |
this setBackground(Color|String background) |
Set new fill color |
this clear() |
Clear canvas |
this rotate(Angle|Number angle, String measure = null) |
Rotate cursor; proxy to this.angle.rotate() |
Position calcMoveRelational (Integer dx, Integer dy) |
Proxy to Position.calcRelational() |
Position calcMoveDistance (Integer distance) |
Proxy to Position.calcDistance() |
this moveTo(Integer newX, Integer newY) |
Move to given position |
this moveRel(Integer dx, Integer dy) |
Calc new position relative and move to it |
this move(Integer distance) |
Move with given direction and distance |
this lineTo(Integer newX, Integer newY) |
Move to given position; draw line |
this lineRel(Integer dx, Integer dy) |
Calc new position relative and move to it; draw line |
this line(Integer distance) |
Move with given direction and distance; draw line |
this execute(String|Command command, Array params = []) |
Create (if needed) and execute command |
Angle
Constructor
| Parameter |
Default |
Description & restrictions |
Number value |
0 |
Angle value; number; 0 is horizontal from left to right; clockwise rotation. |
String measure |
Angle.DEGREES |
Angle measure (degrees, radians and so on; see constants of Angle). |
Constants
| Constant |
Value |
Description |
String DEGREES |
deg |
Measure in degrees; from 0 to 360 |
String RADIANS |
rad |
Measure in radians; from 0 to 2*PI |
String CLOCK_H |
hours |
Measure in hours; from 0 to 12 |
String CLOCK_M |
minutes |
Measure in minutes; from 0 to 60 |
Properties
| Property |
Description |
Number value |
Angle value; number; 0 is horizontal from left to right; clockwise rotation. |
String measure |
Angle measure (degrees, radians and so on; see constants of Angle). |
String css |
CSS-code to rotate HTML-element. |
Statics
| Method |
Description |
self create(Object parameters = {}) |
Static constructor |
Methods
| Method |
Description |
this setValue(Angle|Number value) |
Set new angle value |
this rotate(Angle|Number value) |
Clockwise rotation with given value |
self convert(String measure) |
Convert angle to another measure |
Color
Constructor
| Parameter |
Description & restrictions |
String value |
HEX-color (sample #123456) or name (sample black; see constant LIST in source) |
Constants
| Constant |
Description |
Object LIST |
Object with some named color, sample LIST.BLACK = '#000000' |
Properties
| Property |
Description |
String value |
HEX-color, sample #123456 |
Integer red |
RGB-color component red |
Integer green |
RGB-color component green |
Integer blue |
RGB-color component blue |
Number hue |
HSL-color component hue |
Number saturation |
HSL-color component saturation |
Number lightness |
HSL-color component lightness |
Statics
| Method |
Description |
self create(String value) |
Static constructor |
self fromRGB (Integer red, Integer green, Integer blue) |
Create color from RGB-components |
self fromHSL (Number hue, Number saturation, Number lightness) |
Create color from HSL-components |
Command
Constructor
| Parameter |
Default |
Description & restrictions |
String|Command command |
required |
Command |
Array[*] params |
[] |
Paramteters |
Constants
| Constant |
Value |
Description |
Integer MIN_X |
proxy |
Proxy to Position.MAX_X |
Integer MIN_Y |
proxy |
Proxy to Position.MAX_Y |
String SET_ANGLE |
setAngle |
Name of method in Turtle to apply this command |
String SET_COLOR |
setColor |
Name of method in Turtle to apply this command |
String SET_BACKGROUND |
setBackground |
Name of method in Turtle to apply this command |
String CLEAR |
clear |
Name of method in Turtle to apply this command |
String ROTATE |
rotate |
Name of method in Turtle to apply this command |
String MOVE_TO |
moveTo |
Name of method in Turtle to apply this command |
String MOVE_REL |
moveRel |
Name of method in Turtle to apply this command |
String MOVE |
move |
Name of method in Turtle to apply this command |
String LINE_TO |
lineTo |
Name of method in Turtle to apply this command |
String LINE_REL |
lineRel |
Name of method in Turtle to apply this command |
String LINE |
line |
Name of method in Turtle to apply this command |
Properties
| Property |
Description |
String name |
Command name |
Array[*] args |
Command arguments |
Statics
| Method |
Description |
self create(String|Command command, Array[*] params) |
Static constructor |
self setAngle(Angle|Number angle) |
See Turtle.setAngle |
self setColor(Color|String color) |
See Turtle.setColor |
self setBackground (Color|String background) |
See Turtle.setBackground |
self clear() |
See Turtle.clear |
self rotate(Angle|Number angle) |
See Turtle.rotate |
self moveTo(Integer newX, Integer newY) |
See Turtle.moveTo |
self moveRel(Integer dx, Integer ry) |
See Turtle.moveRel |
self move(Number distance) |
See Turtle.move |
self lineTo(Integer newX, Integer newY) |
See Turtle.lineTo |
self lineRel(Integer dx, Integer ry) |
See Turtle.lineRel |
self line(Number distance) |
See Turtle.line |
Position
Constructor
| Parameter |
Default |
Description & restrictions |
Integer x |
required |
New horizontal position value (greater than or equals to self.MIN_X) |
Integer y |
required |
New vertical position value (greater than or equals to self.MIN_Y) |
Constants
| Constant |
Value |
Description |
Integer MIN_X |
1 |
Minimal horizontal position value |
Integer MIN_Y |
1 |
Minimal vertical position value |
Properties
| Property |
Description |
Integer x |
Current horizontal position value |
Integer y |
Current vertical position value |
Statics
| Method |
Description |
self create(Integer x, Integer y) |
Static constructor |
Methods
| Method |
Description |
self calcRelational (Integer dx, Integer dy) |
Calc new position by dx/dy |
self calcDistance (Integer distance, Angle direction) |
Calc new position by distance/direction |
Size
Constructor
| Parameter |
Default |
Description & restrictions |
Integer width |
required |
Width; greater than or equals to self.MIN_WIDTH |
Integer height |
required |
Height; greater than or equals to self.MIN_HEIGHT |
Constants
| Constant |
Value |
Description |
Integer MIN_WIDTH |
1 |
Minimal width (proxy to Position.MIN_X) |
Integer MIN_HEIGHT |
1 |
Minimal height (proxy to Position.MIN_Y) |
Properties
| Property |
Description |
Integer width |
Width in px |
Integer height |
Height in px |
Statics
| Method |
Description |
self create(Integer width, Integer height) |
Static constructor |
Uuid
Properties
| Property |
Description |
String value |
UUID value |
Statics
| Method |
Description |
self create() |
Static constructor |
