Drawing on canvas

c0deff is, first of all, a way to short-hand and chain js canvas functions. There are several built-in functions that let you draw on canvas.

There is a number of functions like canvas.polyLine, canvas.quad and canvas.triangle that are now obsolete. They are still present in the core, but will be moved outside of it soon, left only in legacy script - so don't rely on these.


Fills the canvas with color selected


Clears the canvas transparent

canvas.plot(x,y, width, color);

Draws a point. If width is 1 - it is an 1 pixel point.

canvas.line(x1, y1, x2, y2, width, color);

Draws a line through two points

canvas.line(0,0,200,100,2, '#f00');

canvas.line([[x,y],...], width, color);

Draws a line through a set of points. You can also use canvas.polyLi([[x,y],...], width, color);

canvas.line([ [10,10], [40,10], [40,40], [80,40] ], 2, '#000');

canvas.ngon( x, y, r, n, color, rot);

behavior of ngon method will change soon

Draws an n-gon at x,y with radius of r rotated by rot degrees filled with color

canvas.ellipse( x,y,r,r2,fillStyle,rot,lineWidth,strokeColor,sa,ea)

Draws an ellipse at x,y with radii of r and r2, filled with fillStyle, rotated by rot degrees stroked by strokeColor line of lineWidth and cut from sa to ea degrees. The method relies on canvas' ellipse method, but also has a fallback for IE11.