Online Code Editor for Lua

Lua Code Editor and Interpreter for Browser

Online tool to interpret and run Lua in the browser, without installing additional programs. The provided code is processed locally, in the browser. Thus, the written code is not sent to a remote server.

This page is meant as a convenience for first steps at programming. If you plan to program in Lua, you should set up a development environment for the language, as described here.

The embedded editor to write the source code uses CodeMirror (version 6). CodeMirror allows choosing between the MIT and GPL3 licenses. In this case, my choice is the MIT license. The embedded Lua interpreter uses Fengari, which also has MIT license.

Instructions

To create your program, write the code in the provided text box. To run the created code using the Lua interpreter, press the button Run. You can also use the shortcut Ctrl Enter or the shortcut Shift Enter to run the code using the keyboard.

For convenience, the output of print is shown in Program Output. Output operations using io, such as io.write() and io.read(), are not implemented by Fengari. Nevertheless, this interpreter provides a simple implementation for io.read() using JavaScript's prompt() to read data from the keyboard.

Drawing on a Canvas

This page also provides a canvas for 2D drawing. To use it, you can write the following code to get a reference to the context use as a handle for drawing.

local js = require "js"
local window = js.global
local document = window.document

local canvas = document:getElementById("code-canvas")
local context = canvas:getContext("2d")
-- Example of drawing a blue rectangle at position (10, 20), with a width of 200
-- pixels and a height of 100 pixels.
context.fillStyle = "blue"
context:fillRect(10, 20, 200, 100)

Next, you can use context to draw in the canvas. The results will be shown in Canvas.

Drawing with Turtle Graphics

It is also possible to use the canvas for Turtle Graphics, using a simple implementation created by the author.

local enable_animation = true
local turtle = turtle_graphics.Turtle:new(nil, enable_animation, 10, 10)

-- (0, 0) corresponds to the center of the canvas in Turtle Graphics.
turtle:setPosition(30, 10)
-- Draw a letter F.
turtle:forward(50)
turtle:right(90)
turtle:forward(40)
turtle:backward(40)
turtle:left(90)
turtle:forward(40)
turtle:right(90)
turtle:forward(50)

Turtle graphics have been introduced by the Logo programming language.

Limitation. If animations are enabled, you should not mix drawing in the canvas using context and turtle graphics. If you wish to do so, you must disable animations (pass false instead of true for enable_animation). With animations disabled, you can draw in any order.

My implementation for the animation clears the canvas every frame to draw the turtle's head (the green triangle).

Editor Settings

The editor have some settings:

• Indent code using TAB?: If the option is marked, TAB will indent the code by one level and Shift TAB will "deindent" the code by one level (it will remove one level of indentation).

  The option is disabled by default due to accessibility concerns. TAB and Shift TAB can be used to browse a page using a keyboard, switching between fields and options in the browser.

  If the option is enabled, the navigation will not be possible normally. To perform it, you can use, respectively, ESC TAB (ESC, then TAB) and ESC Shift TAB (ESC, then Shift TAB).

• Advanced: enable Vim mode?: Experimental option. This option is not recommended for beginners.

  If the option is marked, the text editing will use the modal edition style adopted by the Vim editor.

  The feature uses Codemirror-vim, with MIT license.

Program