HTML, CSS and JavaScript playground - Liveweave

Initializing

Liveweave Web expand_more
build Tools expand_more
library_add Library expand_more
- AAlgolia JS
- Animate CSS
- Apex Charts JS
- BBulma CSS
- Bootstrap
- CChart JS
- Chartist
- Create JS
- DD3
- Dojo
- FFoundation
- Fullpage JS
- GGranim JS
- Google Charts
- HHalfmoon
- JjQuery
- MMaterialize
- Moment JS
- Masonry JS
- Milligram CSS
- PPure CSS
- Primer CSS
- Popper JS
- Pattern CSS
- Picnic CSS
- RReact JS
- Raphael JS
- Raisin CSS
- SSemantic UI
- Skeleton CSS
- Spectre CSS
- Tachyons CSS
- TTailwind
- Three JS
- UUI Kit
- Vis JS
- WWater CSS
download Download expand_more
- developer_mode Download as HTML
- folder_zip Download as .ZIP
account_circle Login
settings Settings expand_more
smart_display Run

#wrapper{
    margin: 0 auto;
    width: 100%;
    border: 1px solid #999;
    padding: 5px;
    overflow: hidden;
}
#content{
    float:left;
}

#image-list{
    margin: 0px;
    padding: 0px;
    float:right;
    width:150px;
}
#image-list li{
    list-style: none;
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px dashed #000;
    cursor:move;
}
.draggable-image{
    width: 150px;
    max-height: 175px;
    float:left;
}

#deleteall,#deleteactive{
	cursor:pointer;
}

#canvas-drop-area{
    display:none;
    position: absolute;
    top:14px;
    width:320px;
    height:256px;
    background:transparent;
}

#canvas-drop-area.active{
    display:block;
    border: 1px solid red;
}

#canvas-drop-area1{
    display:none;
    position: absolute;
    top:256px;
    width:320px;
    height:256px;
    background:transparent;
}

#canvas-drop-area1.active{
    display:block;
    border: 1px solid green;
}

#canvas{
    width:320px;
    height:256px;
    overflow:hidden;
    float:left;
    border:1px solid #000000;
}

#canvas1{
    width:320px;
    height:256px;
    overflow:hidden;
    float:left;
    border:1px solid #000000;
}

(function () {
    var canvas = new fabric.Canvas('canvas');
   
  
  	fabric.Image.fromURL('http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg', function (img) {
		var img1 = img.set({
			left: 0,
			top: 0
		});
		fabric.Image.fromURL('http://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG', function (img) {
			var img2 = img.set({
				left: 0,
				top: 0
			});
			group = new fabric.Group([img1, img2], {
				left: 0,
				top: 0,
				originX: 'center',
				originY: 'center'
			});
			canvas.add(group);
			group.center();
			//group.hasRotatingPoint=true;
			//group.lockMovementX = group.lockMovementY = true;
			group.lockUniScaling = true;
			group.hasBorders = group.hasControls= false;
			//group.selectable = false;
			canvas.renderAll();
		});
	});
  
  
  
  	$('#rotate').on({
		'mousedown touchstart click': function () {
			 var x=setInterval(function () {group.setAngle(group.getAngle()+30);canvas.renderAll();}, 3000);
			return false;
		},
		'mouseup touchend': function () {
          clearInterval(x);
		}
	});
	
  
  	$('#rotate2').click(function() {
		group.setAngle(group.getAngle()+30);
		canvas.renderAll();
	});
	
})();