framing

Online editor for live coding JS graphics with the canvas API. Try it out here!

example

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.

usage

esc

Show/hide help window

ctrl+h

Toggle hiding code and output

ctrl+f

Toggle fullscreen mode

cmd/ctrl+enter

Save and evaluate code. If the code errors, the error is displayed on the lower left. The URL is updated with a shareable link.

cmd/ctrl+d

Duplicate current line

cmd/ctrl+k

Comment/uncomment current selection

cmd/ctrl+l

Select current line(s)

back/forward

Back and forward buttons in the browser moves through save history.

installing

Clone this repo and with npm do:

npm install
npm run dev

It should open in your browser at localhost:8080.

inspiration

Inspired by https://hydra-editor.glitch.me, the programming module at https://www.khanacademy.org/computer-programming/new/pjs and http://processingjs.org/.

license

MIT