Skip to content

Instantly share code, notes, and snippets.

@accessomnath

accessomnath/index.php

Created June 17, 2016 03:43
Show Gist options
  • Save accessomnath/c5e36bbbf3b067b548ab4e3a5ddf6291 to your computer and use it in GitHub Desktop.
Save accessomnath/c5e36bbbf3b067b548ab4e3a5ddf6291 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment