Online editor for live coding JS graphics with the canvas API. Try it out here!
To draw something on the canvas use the shorthand functions or standard canvas functions on the ctx global.
Press F1 to get a list of shorthand functions.
// using shorthand
fstyle('orange')
frect(500, 500, 100, 100)
// using standard
ctx.fillStyle('orange')
ctx.fillRect(500, 500, 100, 100)To run code for each frame, define a function draw(n).
This function will be called for each frame. Current frame number is passed as n:
fps(6)
fstyle('orange')
var s = 20,
x = 0,
y = 0
function draw(n) {
for (x = 0; x < w; x += s) {
for (y = 0; y < h; y += s) {
frect(x, y, s - 5, s - 5)
}
}
}Control the number of frames per second with fps(n).
Look inside the examples directory for examples and inspiration. Press F1 for more help.
Show/hide help window
Toggle hiding code and output
Toggle fullscreen mode
Save and evaluate code. If the code errors, the error is displayed on the lower left. The URL is updated with a shareable link.
Duplicate current line
Comment/uncomment current selection
Select current line(s)
Back and forward buttons in the browser moves through save history.
Clone this repo and with npm do:
npm install
npm run dev
It should open in your browser at localhost:8080.
Inspired by https://hydra-editor.glitch.me, the programming module at https://www.khanacademy.org/computer-programming/new/pjs and http://processingjs.org/.
MIT