Drawing

Functions begining with "draw" draw directly to the <canvas> element.

color()

Set or retrieve the color used by drawRect(), drawText() and drawLine().

Example

newGame('canvas-id');

color(255, 0, 0);
drawRect('fill', 10, 10, 50, 100);

color(0, 255, 0);
drawRect('fill', 70, 10, 50, 100);

color(0, 0, 255);
drawRect('fill', 130, 10, 50, 100);

Overloads
color(): Color
color(r: number, g: number, b: number): Color
color(color: Color): Color

Parameters
style: string: 'line' or 'fill'
x: number: x coordinate, number of pixels from the right
y: number: y coordinate, number of pixels from the top
width: number: width of the rectangle
height: number: height of the rectangle

Return
The current color as a Color object.

---

drawRect()

Draws a rectangle shape in the current color().

Example

newGame('canvas-id');
color(255, 0, 0);
drawRect('fill', 10, 10, 100, 100);

Overloads
drawRect(style: "line" | "fill", x: number, y: number, width: number, height: number) => void

Parameters
style: string: 'line' or 'fill'
x: number: x coordinate, number of pixels from the right
y: number: y coordinate, number of pixels from the top
width: number: width of the rectangle
height: number: height of the rectangle

Return
No return

---

drawLine()

Draws a line between two points in the current color() with the current lineWidth().

Example

newGame('canvas-id');

color(150, 200, 0);

lineWidth(1);
drawLine(10, 10, 250, 10);

lineWidth(5);
drawLine(10, 30, 250, 30);

lineWidth(10);
drawLine(10, 60, 250, 60);

lineWidth(15);
drawLine(10, 100, 250, 100);

Overloads
drawLine(x1: number, y1: number, x2: number, y2: number)

Parameters
x1: number: x coordinate for start of line, number of pixels from the right
y1: number: y coordinate for start of line, number of pixels from the top
x2: number: x coordinate for end of line, number of pixels from the right
x2: number: y coordinate for end of line, number of pixels from the top

Return
No return

---

drawText()

Draws text in the current color() with the current font(), fontSize() and fontWeight().

Example

newGame('canvas-id');

font('sans-serif');
drawText('sans-serif', 10, 10);

font('serif');
fontSize(30);
color(250, 100, 0);
drawText('serif', 10, 40);

font('Dancing Script');
fontSize(50);
color(250, 250, 0);
drawText('Dancing Script', 10, 80);

font('sans-serif');
fontSize(20);
drawText("Breaking long lines doesn't work, but they should", 10, 140, 200);

font('sans-serif');
fontSize(20);
drawText("Right aligned", 440, 170, 'right');

Overloads
drawText(text: string, x: number, y: number): void
drawText(text: string, x: number, y: number, maxWidth: number): void
drawText(text: string, x: number, y: number, align: 'left' | 'center' | 'right'): void
drawText(text: string, x: number, y: number, align: 'left' | 'center' | 'right', maxWidth: number): void

Parameters
text: string: The text
x: number: x coordinate for start of line, number of pixels from the right
y: number: y coordinate for start of line, number of pixels from the top
align: string: Vertical alignment, one of 'left', 'center' or 'right'
maxWidth: number: The max width of the text in pixels, beaks the text into multiple lines. Doesn't currently work.

Return
No return