Framework para trabajar con el elemento HTML5 Canvas

Fabric.js es un framework desarrollado con JavaScript para facilitar el trabajo con el elemento HTML5 Canvas. Una de las ventajas de utilizar el elemento Canvas combinado con gráficos SVG, es que podemos escalar, mover y rotas estos elementos sin perder ninguna de sus propiedades, manteniendo perfectamente aspectos como el color, la transparencia y la calidad […]

Fabric.js es un framework desarrollado con JavaScript para facilitar el trabajo con el elemento HTML5 Canvas.
Una de las ventajas de utilizar el elemento Canvas combinado con gráficos SVG, es que podemos escalar, mover y rotas estos elementos sin perder ninguna de sus propiedades, manteniendo perfectamente aspectos como el color, la transparencia y la calidad de los mismos.
Framework canvas HTML5
El ejemplo que expongo a continuación es para generar un gráfico muy similar al de la captura de pantalla.

function makeCircle(left, top, line1, line2, line3, line4) {
var c = new fabric.Circle({
left: left,
top: top,
strokeWidth: 5,
radius: 12,
fill: '#fff',
stroke: '#666'
});
c.hasControls = c.hasBorders = false;

c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
c.line4 = line4;

return c;
}

function makeLine(coords) {
return new fabric.Line(coords, {
fill: 'red',
strokeWidth: 5,
selectable: false
});
}

var canvas = new fabric.Canvas('c', { selection: false });

var line = makeLine([ 250, 125, 250, 175 ]),
line2 = makeLine([ 250, 175, 250, 250 ]),
line3 = makeLine([ 250, 250, 300, 350]),
line4 = makeLine([ 250, 250, 200, 350]),
line5 = makeLine([ 250, 175, 175, 225 ]),
line6 = makeLine([ 250, 175, 325, 225 ]);

canvas.add(line, line2, line3, line4, line5, line6);

canvas.add(
makeCircle(line.get('x1'), line.get('y1'), null, line),
makeCircle(line.get('x2'), line.get('y2'), line, line2, line5, line6),
makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4),
makeCircle(line3.get('x2'), line3.get('y2'), line3),
makeCircle(line4.get('x2'), line4.get('y2'), line4),
makeCircle(line5.get('x2'), line5.get('y2'), line5),
makeCircle(line6.get('x2'), line6.get('y2'), line6)
);

canvas.on('object:moving', function(e) {
var p = e.target;
p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
canvas.renderAll();
});

El sitio web de este proyecto, además de tener multitud de ejemplos, cuenta con una documentación muy completa y fácil de entender.

Web autor