What is Kid.js? Getting Started The Stage Support Overview Functions Properties Grouping Shapes Overview Functions Easing Chaining Writing Text Live Text Properties Making Noise Functions Properties What Are Events? Keyboard Input Mouse Input Device Orientation Device Motion Enabling Physics Properties Events Lesson Plans

Shapes

The shape functions create new objects and add them to the stage, centered at the specified coordinates. The shape's various properties (fill, stroke, etc.) are initially set to the global values, but can be changed at anytime.

Functions

circle(x, y, size)

Creates a circle centered at the specified x and y coordinates, of the specified size.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Diameter of circle in pixels.

Returns

Circle
circle(400, 200, 250)

heptagon(x, y, size)

Creates a regular heptagon (7 sided polygon) centered at the specified x and y coordinates, of the specified size.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Diameter of the bounding circle in pixels.

Returns

RegularPolygon
heptagon(400, 200, 250)

hexagon(x, y, size)

Creates a regular hexagon (6 sided polygon) centered at the specified x and y coordinates, of the specified size.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Diameter of the bounding circle in pixels.

Returns

RegularPolygon
hexagon(400, 200, 250)

octagon(x, y, size)

Creates a regular octagon (8 sided polygon) centered at the specified x and y coordinates, of the specified size.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Diameter of the bounding circle in pixels.

Returns

RegularPolygon
octagon(400, 200, 250)

oval(x, y, width, height)

Creates a oval width centered at the specified x and y coordinates, with the specified width and height.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • width Number Width of oval in pixels.
  • height Number Height of oval in pixels.

Returns

Oval
oval(400, 200, 250, 150)

pentagon(x, y, size)

Creates a regular pentagon (5 sided polygon) centered at the specified x and y coordinates, of the specified size.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Diameter of the bounding circle in pixels.

Returns

RegularPolygon
pentagon(400, 200, 250)

rect(x, y, width, height)

Creates a rectangle centered at the specified x and y coordinates, with the specified width and height.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • width Number Width of rectangle in pixels.
  • height Number Height of rectangle in pixels.

Returns

Rectangle
rect(400, 200, 250, 150)

semicircle(x, y, size)

Creates a semicircle centered at the specified x and y coordinates, of the specified size.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Diameter of the semicircle in pixels.

Returns

Semicircle
semicircle(400, 200, 250)

square(x, y, size)

Creates a square centered at the specified x and y coordinates, of the specified size.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Width and height of the square in pixels.

Returns

Rectangle
square(400, 200, 200)

star(x, y, outerSize, innerSize = null, points = 5)

Creates a stars centered at the specified x and y coordinates, of the specified size. You may optionally specify an inner radius as well as the number of points.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • outerSize Number Outer diameter in pixels.
  • innerSize Number Inner diameter in pixels.
  • points Number Number of points on the star.

Returns

Polygon
star(400, 200, 250, 150, 5)

triangle(x, y, width, height = null)

Creates a triange centered at the specified x and y coordinates, of the specified width and height. The height parameter is optional. If omitted a regular triangle will be created.

Parameters

  • x Number x coordinate of center point.
  • y Number y coordinate of center point.
  • size Number Width of triangle.
  • size Number Height of triangle.

Returns

Polygon
triangle(300, 200, 150) triangle(500, 200, 150, 250)

line(x1, y1, x2, y2)

Creates a line between two points.

Parameters

  • x1 Number x coordinate of the first point.
  • y1 Number y coordinate of the first point.
  • x2 Number x coordinate of the second point.
  • y2 Number y coordinate of the second point.

Returns

Line
line(200, 100, 600, 300)

curve(x1, y1, x2, y2, x3, y3, ...)

Creates a curve using the specified control points. You may pass any number of sets of x and y coordinate. The curve will begin at the first point and end at the last point, guided by the points in between.

Parameters

  • x1...xn Number x coordinate of control point.
  • y1...yn Number y coordinate of control point.

Returns

Curve
fill = 'black' circle(200, 200, 10) circle(350, 300, 10) circle(450, 100, 10) circle(600, 200, 10) curve(200, 200, 350, 300, 450, 100, 600, 200)

Properties

object.angle

A Number defining the rotation of the object in degrees.

let slope = rect(400, 200, 350, 50) slope.angle = 10

object.lineWidth

A Number defining the line width of the object's stroke in pixels.

let ball = circle(400, 200, 250) ball.stroke = 'black' ball.lineWidth = 10

object.fill

A String defining the object's fill color. This can be a known named color such as "red", "blue", etc., a hexidecimal color code in the format #rrbbgg or the individual rgb values in the format rgb(red, green, blue).

let sirius = star(400, 200, 300) sirius.fill = 'pink'

object.stroke

A String defining the object's stroke color. This can be a known named color such as "red", "blue", etc., a hexidecimal color code in the format #rrbbgg or the individual rgb values in the format rgb(red, green, blue).

let sirius = star(400, 200, 300) sirius.fill = 'pink' sirius.stroke = 'purple'

Grouping Shapes

Several shapes can be grouped together using the group() function. The group then has it's own set of position and size properties.

group(shape1, shape2, shape3, ...)

Groups together the specified shapes.

Parameters

  • shape1...shapen Shape Shape to include in group.

Returns

Group
let a = rect(400, 120, 70, 50) let b = semicircle(400, 90, 70).rotate(180) let c = semicircle(400, 170, 120) let d = triangle(360, 200, 10, 50).rotate(200) let e = triangle(440, 200, 10, 50).rotate(160) a.fill = 'palegreen' b.fill = 'palegreen' c.fill = 'limegreen' d.fill = 'limegreen' e.fill = 'limegreen' let saucer = group(a, b, c, d, e) saucer.push(0, -4)