minicanvas.js helps you to quickly build canvas renderings. It works in the browser and in node seamlessly.
Here is an example:
It renders an image just like this:
The API is quite simple and all methods are chainable.
MiniCanvas.create generates a new instance. You can then use the many drawing options available and in the end call
display(name) to 'show' the result. What
display does depends on the environment, if you are using minicanvas in the browser than it will attach the canvas to the DOM (by default it will append to the body but you can decide for another parent element by overwriting
minicanvas.BrowserCanvas.parentNode). If the image has been rendered within nodejs then an image file will be created and stored inside the
images folder (the folder name can be redefined by overwriting
minicanvas.js is all about makeing it simple, saving images mean no streams or complicated setups, just give your sample a name. Images will be saved in PNG format if they are static, or Animated GIF if there is an animation involved.
border(weight = 1.0, ?color = #000000)
Generates a border around the canvas.
Paints the entire canvas point by point.
handler argument must be a function that takes two arguments, x and y, with values between
1.0. The function must return a color in string format.
checkboard(?size = 8, ?light = #ffffff, ?dark = #cccccc)
Generates a checkboard pattern whose tiles have side
size and alternate between the
circle(x, y, radius, weight, ?lineColor, ?fillColor)
Draws a circle. If
lineColor is passed the perimeter will be drawn with a weight of
fillColor is provided the area will be filled with that color.
Clears out the entire canvas.
cross(?ox, ?oy, ?weight = 1.0, ?color)
Generates a cross shape. If no offsets (
oy) are provided the cross lines will be centered in the canvas area. Remember that if you want to use the default values you have to pass
null values in their places.
dot(x, y, ?radius = 3, ?color)
Draws a dot at
dotGrid(?dx = 10.0, ?dy = 10.0, ?radius = 1.0, ?color, ?ox = 0.5, ?oy = 0.5)
Generates a grid of dots.