FabricJs CTRL C + CTRL V
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<canvas id="c" width="600" height="300"></canvas>
JavaScript
jQuery(document).ready(function($) {
// Code from FabricJs tutorial - http://fabricjs.com/fabric-intro-part-1/#objects
var canvas = new fabric.Canvas('c');
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 80,
height: 40
});
var triangle = new fabric.Triangle({
left: 100,
top: 100,
width: 40,
height: 40,
fill: 'blue'
});
var group = new fabric.Group([ rect, triangle ], {
left: 150,
top: 100,
angle: 20
});
// "add" rectangle onto canvas
//canvas.add(rect);
canvas.add(group);
canvas.renderAll(); // this wasn't mentioned in the tutorial, but I'm pretty sure it's needed
var map = {17: false, 46: false, 67: false, 86: false};
var copiedObject;
var copiedObjects = new Array();
$(document).keydown(function(e) {
if (e.keyCode in map) {
map[e.keyCode] = true;
if (map[17] && map[67]) {
event.preventDefault();
if(canvas.getActiveGroup()){
for(var i in canvas.getActiveGroup().objects){
var object = fabric.util.object.clone(canvas.getActiveGroup().objects[i]);
object.set("top", object.top+5);
object.set("left", object.left+5);
copiedObjects[i] = object;
}
}
else if(canvas.getActiveObject()){
var object = fabric.util.object.clone(canvas.getActiveObject());
object.set("top", object.top+5);
object.set("left", object.left+5);
copiedObject = object;
copiedObjects = new Array();
}
}else if(map[17] && map[86]){
event.preventDefault();
if(copiedObjects.length > 0){
for(var i in copiedObjects){
canvas.add(copiedObjects[i]);
}
}
else if(copiedObject){
...