Question

HTML5 canvas provides lots of flexibility to draw images using javascript. We need to generate javascript code based on inputs from the user (say something like 10 balls of blue color, 5 squares of green color and of a certain size …). Is there an library which provides appropriate Javascript API(s) so that it is easier to generate the canvas along with the javascript code for requirements listed above?

Answer 1

With Fabric.js it’s quite trivial to draw simple shapes (circles, rectangles, etc.) on canvas. It also supports image importing and manipulation.

Displaying rectangle, for example is as easy as:

var canvas = new fabric.Canvas('id_of_canvas_element');

var rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red'
});

canvas.add(rect);

Take a look at demos.