html5 - example - Capas en lona fabric.js

fabricjs mobile

Question

¿Puedo crear capas en canvas¿? Necesito una capa encima de los objetos y otra capa de tela con objetos que se mueven dentro de esa capa. ¿Es posible? Yo uso fabric.js

EDITAR: El grupo no me sirve. Necesito crear áreas dentro del lienzo donde pueda mover objetos en ellas, pero no el resto. Y para conocer esa posición con respecto a esa área. https://github.com/kangax/fabric.js/wiki/How-fabric-canvas-layering-works

Answer 1

Al menos para la tela, puedes agrupar las formas y moverse como una sola pieza:

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

var rect1 = new fabric.Rect({ width: 100, height: 100, fill: ''#0bda51'' });
var circle = new fabric.Circle({ radius: 100, fill: ''#4d5d53'' });
var group1 = new fabric.Group([ circle, rect1 ], { left: 100, top: 100 });
canvas.add(group1);

var circle1 = new fabric.Circle({ radius: 100, fill: ''#a2add0'' });
var circle2 = new fabric.Circle({ radius: 75, fill: ''#0038a8'' });
var circle3 = new fabric.Circle({ radius: 50, fill: '' #bf94e4'' });

var group2 = new fabric.Group([ circle1, circle2, circle3 ], { left: 200, top: 200 });
canvas.add(group2);

var shadow = { color: ''rgba(0,0,0,0.6)'', blur: 20, offsetX: 10, offsetY: 10, opacity: 0.6, fillShadow: true, strokeShadow: true }
var rect = new fabric.Rect({ left: 100, top: 100, fill:  "#8ccd7b", stroke: "#000", width: 100,      height: 100, strokeWidth: 10, opacity: .8 });
rect.setShadow(shadow);
canvas.add(rect);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>