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?

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?

• javascript
• html
• canvas

Share Improve this question Follow edited Oct 7, 2010 at 21:33 kangax 39.2k1313 gold badges100100 silver badges135135 bronze badges asked Oct 7, 2010 at 10:46 user339108user339108 13.1k3434 gold badges8282 silver badges112112 bronze badges 2

• Java APIs? Do you mean JavaScript APIs? – Matt Ball Commented Oct 7, 2010 at 14:47
• Yes (either Java or Javascript based) abstraction should be fine. I have used code.google./p/charts4j before and found it to tbe useful. – user339108 Commented Oct 8, 2010 at 11:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.