One of the features in our School is a Playground - basically, a place where you can write code, save it and later to share (in auto-running mode) to anyone by direct link.
For coding you use the Lua language (v5.4) which is taught in our school as main instrument. So you can quickly
grasp it browsing a few lessons here or alternatively at some other resources mentioned at lua.org
and elsewhere.
We have a Graphic Extension here, which allows to draw on the canvas in the web-page using the language functions - and eventually to create interactive graphic programs, even mini-games (actually it is what playground is created for).
Below follows quick recap of useful functions (more thoroughly explained in lessons).
graph.init() - initializes drawing system (finds the canvas in the page, takes its measurements so graph.w and graph.h
reflect its size, sets defaults for colors, fonts etc).
graph.rect(x, y, w, h, color) - draws filled rectangle, with x,y being upper-right corner and w,h standing for width
and height.
graph.color(c) - sets the current color for upcoming drawing of lines, texts etc (except filled shapes) - the color is
specified as web color - e.g. red, white, #33ff88, #55f, rgb(100,100,100)
all should work.
graph.line(x1, y1, x2, y2) - draws a line between points x1,y1 and x2,y2.
graph.circle(x, y, rad, color) - draws a circle with center at x,y and given radius; if color is not specified - it is
an unfilled circle using current color for line.
graph.text(x, y, phrase) - prints a text at coordinates x,y.
graph.font(size, family) - sets size and optionally family (name) of the font to use, by default it is monospace.
x, y = graph.click() - returns two values, coordinates of the last click (if any happened since the previous call - otherwise
returns -1,-1).
graph.delay(ms) - delays execution for given amount of milliseconds.
Meta-comments
There is a way to modify representation of the page by using in your program comments of special type:
--play:title:Some Text to End Of Line - set the visible title for your program
--play:canvas:100 - sets height of canvas (width is fixed to 640), e.g. make it 800 or 960 if you aim mainly mobile screens
in portrait orientation; set to 0 if canvas is not needed at all.
--play:console:10 - number of lines to show in the output box; set to 0 to hide it completely.
As a simple interactive demos, kindly review these tiny applications (remember here is view code feature at the bottom of each):