js-turtle is an environment to learn/teach programming with JavaScript language. Idea initialy comes from Seymour Papert.
Javascript version of turtle graphycs initialy started by bjpop, then forked and developed by hanumanum

Work Offline

1. Download archive
2. Extract it
3. Open turtle.js in your favorite text editor (Visual Studio Code, Notepad++, Geany, Sublime Text ...)
4. Open turtle.html in browser
5. Write code in turtle.js, save and reload browser

Work Online

You also can write and test your code at the codepan: js-turtle already integrated.

js-turtle on codepan

forward()

Turtle moves forward and draw line by given steps, if we write 100 between parentheses, then turtle will move by 100 step.

forward(steps)

int: steps

Example 1

forward(100)

Result

left()

Turtle turn left by given degree, if we write 30 between parentheses, then turtle will turn by 30 degrees.

left(degrees)

int: degrees

Example 1

left(30)
left(60)
left(90)
                                                

Result

Example 2

forward(100)
left(30)
forward(100)
left(50)
                                                    

Result

Geometry

Note!

turtle turns by angle, not becomes to an angle provided to function left()

You can play with it here.

Result

right()

Same as in left but to right :)

See left

width()

Sets line thickness

width(thickness)

int: thickness

Example

width(3)
forward(100)
                                                       
width(15)
forward(100)

width(6)
forward(100)

Result

color()

Sets color of next lines

color(r [, g [, b ]]])

string: a (color name)
int: a, b, c (RGB)
string: a (color hexcode)
array: [a,b,c]

Example 1 (color name)

color("red")
forward(100)

color("green")
forward(60)

color("dodgerblue")
forward(120)

You can explore all available color names here

Result

Example 2 (RGB)

color(255,15,20)
forward(100)

color(12,250,65)
forward(60)

color(89,100,36)
forward(120)

You can pick colors from here

Result

Example 3 (HEX)

color("#3EEF0F")
forward(100)

color("#ED16A2")
forward(60)

color("#EDCD16")
forward(120)

You can pick colors from here

Result

Example 4 (array RGB)

color([15,20,200])
forward(100)

color([65,250,150])
forward(60)

color([255,100,200])
forward(120)

You can pick colors from here

Result

goto()

Move to x,y coordinates without drawing a line

goto(x,y)

int: x, int: y

Example 1

color("red")
goto(-213,128)
forward(100)

color("blue")
goto(-7,105)
forward(60)

color("green")
goto(238,-182)
forward(120)

Result

penup() & pendown()

penup() sets to not draw next lines. pendown() removes that setting

penup()

pendown()

no arguments

Example

color("red")
forward(100)

penup()
forward(60)

pendown()
color("blue")
forward(100)

Result

clear()

Clear all canvas. Use clear() mostly for animations.

clear()

no arguments

clear()

We have some interesting and useful functions here.

showGrid()

Shows Euclidean grid on canvas. We recomend call this function before all others. Argument sets grid scale.

showGrid(scale)

int: scale

Example 1

showGrid(50)

Result

Example 2

showGrid(20)

Result

randomColor_h()

Set random color on each time it called.

randomColor_h()

no arguments

Example 1

width(4)

setInterval(function(){
    goto(0,0)
    randomColor_h()
    forward(100)
    left(10)
},300)

Result

strangeLine()

strangeLine() is like forward() but line has random pattern

strangeLine([steps])

int: steps

Example

color("red")
strangeLine(200)

goto(186,-164)

color("blue")
strangeLine(250)

Result

strangeSquare()

strangeSquare() draws patterned square, by particles

strangeSquare(length[,step])

arguments

int: length
int: step

Example

goto(-206,169)
color("red")
strangeSquare(200,15)

goto(138,98)
color("blue")
strangeSquare(100,5)

Result

strangeCircle()

strangeCircle() draws patterned cirlce, by particles

strangeCircle(radius)

arguments

int: radius

Example

goto(-15,-26)
color("red")
strangeCircle(200)

goto(37,-63)
color("blue")
strangeCircle(100)

Result

strangeGalaxy()

strangeGalaxy() draws patterned "galaxy", by particles

strangeGalaxy(radius)

arguments

int: radius

Example

goto(-158,167)
color("red")
strangeGalaxy(180)

goto(149,-165)
color("blue")
strangeGalaxy(100)

Result