accessomnath/index.php

## index.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <script src="js/fabric.min.js" type="text/javascript"></script>
</head>

<body>
<canvas id="o" width="1400" height="800">
    <img src="images/1.gif" id="my-image" >
    <img src="images/2.JPG" id="my-imageNew">

</canvas>

<script>
    var canvas = new fabric.Canvas('o');

    var circle = new fabric.Circle({
        radius: 20,
        fill: 'green',
        left: 100,
        top: 100
    });
    var triangle = new fabric.Triangle({
        width: 20,
        height: 30,
        fill: 'blue',
        left: 50,
        top: 50
    });

//        var imgElement1 = document.getElementById('my-imageNew');
  var imgElement = document.getElementById('my-image');
    var imgInstance = new fabric.Image(imgElement, {
        left: 100,
        top: 100,
        angle: 0,
        opacity: 0.85,
        height:488,
        width: 593


    });
canvas.add(imgInstance);

//        fabric.util.loadImage(imgElement, function (img) {
//            var legimg = new fabric.Image(img, {
//                left: 30,
//                top: marker.top,
//                scaleX: 20 / img.width,
//                scaleY: 20 / img.height
//            });
//            canvas.add(legimg);
//            canvas.renderAll();
//        });


//    fabric.Image.fromURL('images/2.JPG', function(oImg) {
//        // scale image down, and flip it, before adding it onto canvas
//        oImg.scale(0.5).setFlipX(true);
//        canvas.add(oImg);
//    });
//    fabric.Image.fromURL('images/1.gif', function(oImg1) {
//        // scale image down, and flip it, before adding it onto canvas
//        oImg.scale(0.5).setFlipX(true);
//        canvas.add(oImg1);
//    });
//    fabric.Image.fromURL('images/1.gif', function(image) {
//        image.set({
//            left:500,
//            top: 500,
//            angle: 0,
//            padding:50,
//            height:488,
//            width:593
//
////            width:593,
////            height:488 ,
////            selectable: true
//        });
//        canvas.add(image);
//
//    });
    fabric.Image.fromURL('images/2.JPG', function(image) {
        image.set({

            width:350,
            height:375 ,
            selectable: true
        });
        canvas.add(image);

    });


    var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');

    path.set({
        fill: 'red',
        stroke: 'green',
        opacity: 0.5
    });


    canvas.add(circle, triangle, path);

</script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title of the document</title>
	<script src="js/fabric.min.js" type="text/javascript"></script>
	</head>

	<body>
	<canvas id="o" width="1400" height="800">
	<img src="images/1.gif" id="my-image" >
	<img src="images/2.JPG" id="my-imageNew">

	</canvas>

	<script>
	var canvas = new fabric.Canvas('o');

	var circle = new fabric.Circle({
	radius: 20,
	fill: 'green',
	left: 100,
	top: 100
	});
	var triangle = new fabric.Triangle({
	width: 20,
	height: 30,
	fill: 'blue',
	left: 50,
	top: 50
	});

	// var imgElement1 = document.getElementById('my-imageNew');
	var imgElement = document.getElementById('my-image');
	var imgInstance = new fabric.Image(imgElement, {
	left: 100,
	top: 100,
	angle: 0,
	opacity: 0.85,
	height:488,
	width: 593


	});
	canvas.add(imgInstance);

	// fabric.util.loadImage(imgElement, function (img) {
	// var legimg = new fabric.Image(img, {
	// left: 30,
	// top: marker.top,
	// scaleX: 20 / img.width,
	// scaleY: 20 / img.height
	// });
	// canvas.add(legimg);
	// canvas.renderAll();
	// });


	// fabric.Image.fromURL('images/2.JPG', function(oImg) {
	// // scale image down, and flip it, before adding it onto canvas
	// oImg.scale(0.5).setFlipX(true);
	// canvas.add(oImg);
	// });
	// fabric.Image.fromURL('images/1.gif', function(oImg1) {
	// // scale image down, and flip it, before adding it onto canvas
	// oImg.scale(0.5).setFlipX(true);
	// canvas.add(oImg1);
	// });
	// fabric.Image.fromURL('images/1.gif', function(image) {
	// image.set({
	// left:500,
	// top: 500,
	// angle: 0,
	// padding:50,
	// height:488,
	// width:593
	//
	//// width:593,
	//// height:488 ,
	//// selectable: true
	// });
	// canvas.add(image);
	//
	// });
	fabric.Image.fromURL('images/2.JPG', function(image) {
	image.set({

	width:350,
	height:375 ,
	selectable: true
	});
	canvas.add(image);

	});


	var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');

	path.set({
	fill: 'red',
	stroke: 'green',
	opacity: 0.5
	});


	canvas.add(circle, triangle, path);

	</script>
	</body>

	</html>