Develop Reference

Create close button near the shape JointJS

I have some rectangular shapes (they will appear when the data science toolkit buttons is clicked) and they can drag&drop to the free-space (paper). Also you can run and check easily in codepen.io.
Thing that I want to add, is remove dropped shapes by clicking close button. But I don't know how can create close button near the dropped shape and also removing that shape.
Any help would be greatly appreciated, thanks!
// Canvas where sape are dropped
var graph = new joint.dia.Graph,
paper = new joint.dia.Paper({
el: $('#paper'),
model: graph
});
// Canvas from which you take shapes
var stencilGraph = new joint.dia.Graph,
stencilPaper = new joint.dia.Paper({
el: $('#stencil'),
model: stencilGraph,
interactive: false
});
var r1a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1a'
}
}
});
var r1b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1b'
}
}
});
var r2a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2a'
}
}
});
var r2b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2b'
}
}
});
var r3a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect3a'
}
}
});
var r3b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect3b'
}
}
});
var r4a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect4a'
}
}
});
var r4b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect4b'
}
}
});
var statistic = document.getElementById("statistic-button");
var clustering = document.getElementById("clustering-button");
var classification = document.getElementById("classification-button");
var regression = document.getElementById("regression-button");
statistic.onclick = function(){
r1a.addTo(stencilGraph);
r1b.addTo(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
clustering.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.addTo(stencilGraph);
r2b.addTo(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
classification.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.addTo(stencilGraph);
r3b.addTo(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
regression.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.addTo(stencilGraph);
r4b.addTo(stencilGraph);
};
stencilPaper.on('cell:pointerdown', function(cellView, e, x, y) {
$('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
var flyGraph = new joint.dia.Graph,
flyPaper = new joint.dia.Paper({
el: $('#flyPaper'),
model: flyGraph,
interactive: false
}),
flyShape = cellView.model.clone(),
pos = cellView.model.position(),
offset = {
x: x - pos.x,
y: y - pos.y
};
flyShape.position(0, 0);
flyGraph.addCell(flyShape);
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
$('body').on('mousemove.fly', function(e) {
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
});
$('body').on('mouseup.fly', function(e) {
var x = e.pageX,
y = e.pageY,
target = paper.$el.offset();
// Dropped over paper ?
if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
var s = flyShape.clone();
s.position(x - target.left - offset.x, y - target.top - offset.y);
graph.addCell(s);
}
$('body').off('mousemove.fly').off('mouseup.fly');
flyShape.remove();
$('#flyPaper').remove();
});
});
.data-science-toolkit{
height: 300px;
border: 5px double #005580;
}
.data-science-toolkit .before-drop-display-none{
display: none;
}
.ds-tool-space{
border: 5px double #005580;
}
.free-space{
border: 5px solid #005580;
height: auto;
}
.doitcenter{
text-align: center;
}
#paper {
height: auto;
background-color: #f2e6e6;
}
#stencil {
background-color: darkcyan;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row mt-4">
<div class="col-2">
<div class="data-science-toolkit mb-2">
<div class="nav-logo">
<h5 class="doitcenter" style="text-shadow: 0.5px 0.5px 1px gray;">Toolkit</h5>
</div>
<hr>
<div class="dropdown doitcenter mb-1">
<button id="statistic-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Statistics
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="clustering-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Clustering
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="classification-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Classification
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="regression-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Regression
<span class="caret"></span></button>
</div>
</div>
<div class="ds-tool-space mb-2">
<div id="stencil" style="height: 250px;"></div>
</div>
</div>
<div class="col-10">
<div class="free-space">
<div id="paper" style=""></div>
</div>
</div>
</div>
</div>

You can use the built-in elementTools.remove, and bind with an event like the following:
paper.on('element:mouseenter', (elementView) => {
elementView.addTools(
new joint.dia.ToolsView({
tools: [
new joint.elementTools.Remove({
useModelGeometry: true,
y: '0%',
x: '100%',
}),
],
})
);
});
paper.on('element:mouseleave', (elementView) => {
elementView.removeTools();
});
Note that you might need to change the position according to your element shape.
This is also included in the official demo

Save the data of a click on an image in a table js

I have a code that when you click on an image it associates a point to it.
What I would like is that every time I click, the associated point on the image is stored in a table.
If I add 3 points on the image, let those 3 points be stored in a table.
Because afterwards I would like to be able to click on these points to be able to add information.
Thank you very much for your help, and sorry for my English.
Here is my code js
<script>
$(document).ready(function () {
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(document).click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
}
});
});
</script>
<body>
<button class="button">Add a point</button>
<div class="div1">
<img src="photo1.jpg" />
</div>
</body>

You can try the code below:
$(document).ready(function () {
let count = 0
let resultArray = []
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(".div1").click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
count = count +1
$("#myTBody").append(
"<tr id='point"+count+"'><td>"+count+"</td><td>"+ev.pageX+"</td><td>"+ev.pageY+"</td></tr>"
)
let point = {
id:count,
x:ev.pageX,
y:ev.pageY
}
resultArray.push(point) // You could use this array to do something you want
$("#point"+count).on('click', function () {
var output = "ID :"+ $(this).children(":first").text()+" X,Y :"+$(this).children().eq(1).text()+""+$(this).children().eq(2).text()
$("#pointInfo").text(output)
});
}
});
});
.div1 {
width:200px;
height:100px;
background-color:red;
}
tr:hover {
background-color:yellow;
cursor:pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button class="button">Add a point</button>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PointID</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>
<div id="pointInfo"><div>
</body>

Issues in removing object from Canvas in FabricJs

I'm using the Fabricjs for creating a drawing tool. I'm using version 2.2.
Using the canvas methods selection:created and selection:updated. I'm able to remove the object like circle and rectangle bu to a line object.
Here is my JSFiddle link for the code demo.
Draw a line and try to remove it with an eraser.
var canvas = new fabric.Canvas('c', {
selection: false
});
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;
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
});
canvas.add(circle, triangle);
$('#clear').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('clear');
}
});
$('#line').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('line');
}
});
$('#eraser').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('erase');
}
});
var drawingPointer = {
status: false,
previousObj: false
};
function drawingOperation(operation) {
if (drawingPointer.status == 'freedraw') {
canvas.isDrawingMode = false;
}
if (operation == 'line') {
console.log('Called to draw line');
drawingPointer.status = 'line';
canvas.defaultCursor = 'url("https://image.ibb.co/dCkbWc/icon_straight.png") 0 16 ,auto';
canvas.hoverCursor = 'auto';
return;
}
if (operation == 'erase') {
drawingPointer.status = 'erase';
canvas.defaultCursor = canvas.hoverCursor = 'url("https://image.ibb.co/h2bGWc/icon_eraser.png") 2 12 ,auto';
return;
}
if (operation == 'clear') {
drawingPointer.status = false;
drawingPointer.previousObj = false;
canvas.defaultCursor = 'auto';
canvas.hoverCursor = 'auto';
}
}
function handlerObjectSelection(o) {
console.log(o.target);
if (drawingPointer.status == 'erase') {
console.log('Called from Erase Section');
canvas.remove(o.target);
}
}
function handleMouseMovement(o) {
if (drawingPointer.status == 'line' && drawingPointer.strightLine) {
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
canvas.renderAll();
}
}
function handleMouseDown(o) {
if (drawingPointer.status == 'line') {
console.log('MouseDown from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = true;
drawingPointer.strightLine = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
originX: 'center',
originY: 'center'
});
canvas.add(drawingPointer.strightLine);
canvas.renderAll();
}
}
function handleMouseUp(o) {
if (drawingPointer.status == 'line') {
console.log('MouseUp from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
canvas.renderAll();
drawingPointer.strightLine = null;
}
}
canvas.on('selection:created', handlerObjectSelection);
canvas.on('selection:updated', handlerObjectSelection);
canvas.on('mouse:move', handleMouseMovement);
canvas.on('mouse:down', handleMouseDown);
canvas.on('mouse:up', handleMouseUp);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid;margin: 10px;"></canvas>
<div class="row">
<div class="col-xs-10 col-xs-offset-2">
<h3>Drawing Function</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="options" id="clear" autocomplete="off" checked>
<img src="https://image.ibb.co/iedVrc/icon_cursor.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="line" autocomplete="off">
<img src="https://image.ibb.co/dCkbWc/icon_straight.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="eraser" autocomplete="off">
<img src="https://image.ibb.co/h2bGWc/icon_eraser.png" height="16" width="16" />
</label>
</div>
</div>
</div>

drawingPointer.strightLine.setCoords();
You need to use setCoords after drawing complete.
var canvas = new fabric.Canvas('c', {
selection: false
});
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;
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
});
canvas.add(circle, triangle);
$('#clear').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('clear');
}
});
$('#line').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('line');
}
});
$('#eraser').on('change', function() {
if ($(this).is(':checked')) {
drawingOperation('erase');
}
});
var drawingPointer = {
status: false,
previousObj: false
};
function drawingOperation(operation) {
if (drawingPointer.status == 'freedraw') {
canvas.isDrawingMode = false;
}
if (operation == 'line') {
console.log('Called to draw line');
drawingPointer.status = 'line';
canvas.defaultCursor = 'url("https://image.ibb.co/dCkbWc/icon_straight.png") 0 16 ,auto';
canvas.hoverCursor = 'auto';
return;
}
if (operation == 'erase') {
drawingPointer.status = 'erase';
canvas.defaultCursor = canvas.hoverCursor = 'url("https://image.ibb.co/h2bGWc/icon_eraser.png") 2 12 ,auto';
return;
}
if (operation == 'clear') {
drawingPointer.status = false;
drawingPointer.previousObj = false;
canvas.defaultCursor = 'auto';
canvas.hoverCursor = 'auto';
}
}
function handlerObjectSelection(o) {
console.log(o.target);
if (drawingPointer.status == 'erase') {
console.log('Called from Erase Section');
canvas.remove(o.target);
}
}
function handleMouseMovement(o) {
if (drawingPointer.status == 'line' && drawingPointer.strightLine) {
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
canvas.renderAll();
}
}
function handleMouseDown(o) {
if (drawingPointer.status == 'line') {
console.log('MouseDown from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = true;
drawingPointer.strightLine = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
fill: 'red',
stroke: 'red',
strokeWidth: 3,
originX: 'center',
originY: 'center'
});
canvas.add(drawingPointer.strightLine);
canvas.renderAll();
}
}
function handleMouseUp(o) {
if (drawingPointer.status == 'line') {
console.log('MouseUp from Line');
var pointer = canvas.getPointer(o.e);
drawingPointer.down = false;
drawingPointer.strightLine.set({
'x2': pointer.x,
'y2': pointer.y
});
drawingPointer.strightLine.setCoords();
canvas.renderAll();
drawingPointer.strightLine = null;
}
}
canvas.on('selection:created', handlerObjectSelection);
canvas.on('selection:updated', handlerObjectSelection);
canvas.on('mouse:move', handleMouseMovement);
canvas.on('mouse:down', handleMouseDown);
canvas.on('mouse:up', handleMouseUp);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid;margin: 10px;"></canvas>
<div class="row">
<div class="col-xs-10 col-xs-offset-2">
<h3>Drawing Function</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="options" id="clear" autocomplete="off" checked>
<img src="https://image.ibb.co/iedVrc/icon_cursor.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="line" autocomplete="off">
<img src="https://image.ibb.co/dCkbWc/icon_straight.png" height="16" width="16" />
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="eraser" autocomplete="off">
<img src="https://image.ibb.co/h2bGWc/icon_eraser.png" height="16" width="16" />
</label>
</div>
</div>
</div>

HTML5 input type="range" image opacity

I currently have two images and an input:
<input type="range" min="0" max="50" value="25">
.image_1 {
filter: blur(5px);
opacity: .8;
}
.image_2 {
filter: blur(5px);
opacity: .8;
}
The goal is when slider moves right image_2 {filter: blur(0px); opacity: 1; comes into focus and opacity full; meanwhile image_1 {opacity: 0} goes away. Vice versa should happen when the slider is moved to the left.
Any ideas or suggestions are greatly appreciated.
Thank you so far for all your suggestions and answers. I have yet to fully answer my question with provided solutions but I have gotten closer. What I have done is I have added oninput=showVal(this.value) to my input element. I have then created a function:
function showVal(newVal) {
var img_1 = document.getElementById("img_1");
var img_2 = document.getElementById("img_2");
// code to change blur upon value of slider changing (img_1.style.etc)
// unsure how to do
console.log(newVal);
}
Due to all the great answers, I think I have found a solution. However, I am still having an issue with adjusting the opacity. Here is the current open question about it: Google Web Designer dynamically adjust opacity in source code

Done. There is no real way to do this with only CSS as you probably already noticed. You could also send the max blur from the dom as another function parameter to make the code more modular. Also don't forget to add all the filter implementations (I only added webkit's because of time) and watch out for IE10 since onchange might have some issues. See this answer for a fallback
EDIT: added cross browser filter setting compatibility
var config = {
img1: document.querySelector('.image_1'),
img2: document.querySelector('.image_2'),
maxBlurPx: 10
}
function getInput(value, max) {
var sliderPercentage = (value / max).toFixed(2);
config.img1.style.opacity = 1 - sliderPercentage;
setBlur(config.img1, (10*sliderPercentage).toFixed(2));
config.img2.style.opacity = sliderPercentage;
setBlur(config.img2, 10-(10*sliderPercentage).toFixed(2));
config.img2.style.webkitFilter = "blur(" + (10 - (10 * sliderPercentage).toFixed(1)) + "px)";
}
function setBlur(el, value) {
if (el.style.hasOwnProperty('filter'))
el.style.filter = "blur("+value+"px)";
if (el.style.hasOwnProperty('webkitFilter'))
el.style.webkitFilter = "blur("+value+"px)";
if (el.style.hasOwnProperty('mozFilter'))
el.style.mozFilter = "blur("+value+"px)";
if (el.style.hasOwnProperty('oFilter'))
el.style.oFilter = "blur("+value+"px)";
if (el.style.hasOwnProperty('msFilter'))
el.style.msFilter = "blur("+value+"px)";
}
.image_1,
.image_2 {
width: 150px;
}
.image_1 {
filter: blur(5px);
opacity: .8;
}
.image_2 {
filter: blur(5px);
opacity: .8;
}
<input type="range" min="0" max="50" value="25" oninput="getInput(this.value, this.max)">
<br />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_1" />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_2" />

Update
If you have two images, and want to change the opacity, you can still listen for the change event.
The first image's opacity value will be the value of the range input divided by its maximum value. The second image's opacity value will be the difference between the maximum and current value divided by the maximum value.
In other words, one image will become more transparent, and the other will become more opaque.
var range = document.getElementById("range");
var imgOne = document.getElementsByClassName("img1")[0];
var imgTwo = document.getElementsByClassName("img2")[0];
range.addEventListener("change", function() {
imgOne.style.opacity = this.value / this.max;
imgTwo.style.opacity = (this.max - this.value) / this.max;
});
.img1, .img2 {
opacity: 0.5;
}
<input id="range" type="range" min="0" max="50" value="25"><br><br>
<img class="img1" height="200" width="200" src="http://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-11.jpg" />
<img class="img2" height="200" width="200" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLg8Fo8YK5SNLqmZUUCjaUh_2Y57jxBgkmjOwxj7dNSui2jZcb" />

Try this snippet. I used this code on my website http://stark-cove-24150.herokuapp.com
$(document).ready(function(){
$("#designer").mouseenter(function(){
$("#xyz").attr("src", "design.jpg");
$("#face").css("background-image", "url(des2.jpg)");
$("#coder").css("opacity", "0.5");
});
$("#designer").mouseleave(function(){
$("#xyz").attr("src", "def.jpg");
$("#coder").css("opacity", "");
});
$("#coder").mouseenter(function(){
$("#xyz").attr("src", "cp2.jpg");
$("#designer").css("opacity", "0.5");
$("#face").css("background-image", "url(coding.jpg)");
});
$("#coder").mouseleave(function(){
$("#xyz").attr("src", "def.jpg");
$("#face").css("background-image", "url()");
$("#designer").css("opacity", "");
});
});

You can create objects where properties, values correspond to current value of input element
var imgs = $(".image_1, .image_2"),
i = {
"0.4": .6,
"0.3": .7,
"0.2": .8,
"0.1": .9,
"0": 1,
"0.6": .4,
"0.7": .3,
"0.8": .2,
"0.9": .1,
"1": 0
},
blur = {
"0.5": "5px",
"0.6": "4px",
"0.7": "3px",
"0.8": "2px",
"0.9": "1px",
"1": "0px",
"0.4": "4px",
"0.3": "3px",
"0.2": "2px",
"0.1": "1px",
"0": "0px"
};
$("input[type=range]").change(function() {
var n = this.value;
if (n == .5) {
imgs.css({
"-webkit-filter": "blur(" + blur[n] + ")",
"-moz-filter": "blur(" + blur[n] + ")",
"filter": "blur(" + blur[n] + ")"
})
};
if (n > .5) {
imgs.eq(1).css({
"opacity": n,
"-webkit-filter": "blur(" + blur[n] + ")",
"-moz-filter": "blur(" + blur[n] + ")",
"filter": "blur(" + blur[n] + ")"
});
imgs.eq(0).css({
"opacity": i[n]
});
} else {
if (n < .5) {
imgs.eq(1).css({
"opacity": n
});
imgs.eq(0).css({
"opacity": i[n],
"-webkit-filter": "blur(" + blur[n] + ")",
"-moz-filter": "blur(" + blur[n] + ")",
"filter": "blur(" + blur[n] + ")"
})
}
}
}).focus()
img {
transition: all .01s linear;
}
.image_1 {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
opacity: .5;
}
.image_2 {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
opacity: .5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" step=".1" min="0" max="1" value=".5">
<img src="http://lorempixel.com/100/100/technics" class="image_1" />
<img src="http://lorempixel.com/100/100/nature" class="image_2" />

var val=25;
$("input[type='range']").change(function(){
if($(this).val()>val){
$(".image_2").css({
"filter":"blur(0px)",
"opacity":"1"
});
$(".image_1").css({
"opacity":"0"
});
} else {
$(".image_1").css({
"filter":"blur(0px)",
"opacity":"1"
});
$(".image_2").css({
"opacity":"0"
});
}
val=$(this).val();
});
I havent checked this code yet so im not sure if this will work..

here is another example
http://codepen.io/mozzi/pen/qNqJXe
<input id="slider" type="range" min="0" max="50" value="25">
<img id="img1" src="http://www.pd4pic.com/images/number-1-red-circle.png" alt="Smiley face" height="200" width="200">
<img id="img2" src="http://images.clipartpanda.com/numbers-clipart-1-10-4cb4KkKgi.png" alt="Smiley face" height="200" width="200">
$("#img1").fadeTo(0,0.5);
$("#img2").fadeTo(0,0.5 ) ;
$("#slider").change(function() {
var rangeVal = $("#slider").val();
var val1 = (rangeVal/50);
var val2 = ((50-rangeVal)/50);
$("#img1").fadeTo(0,val1);
$("#img2").fadeTo(0,val2 ) ;
});

How to scale object dynamically up to canvas size in Fabric.js

I want to increase height and width of my svg image same as canvas height and width so that it look like background image of canvas. When I press Set Background button, one svg image will be set to canvas from my directory. I want to scale this image up to canvas height and width dynamically.
Expected Output: I want this
Html
<h1>canvas</h1>
<canvas style="left: -300px; border: 1px dotted;" height="385" width="400" id="c"></canvas>
<input type="button" id="svg3" value="set background" />
Script
$(document).ready(function(){
var canvas = new fabric.Canvas('c');
var colorSet="red";
$("#svg3").click(function(){
fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg', function (objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
shape.set({
left: 150,
top:200,
//height: 700,
//width: 700,
scaleX: .35,
scaleY:.35
});
if (shape.isSameColor && shape.isSameColor() || !shape.paths) {
shape.setFill(colorSet);
} else if (shape.paths) {
for (var i = 0; i < shape.paths.length; i++) {
shape.paths[i].setFill(colorSet);
}
}
canvas.add(shape);
canvas.renderAll();
});
});
});
Here is my FIDDLE Demo.
Does anybody have an idea how to do this?

You know your canvas width and height. So this will work:
shape.set({
top: canvas.height/2,
left: canvas.width/2,
scaleY: canvas.height / shape.height,
scaleX: canvas.width / shape.width
});

I finally got the solution:
HTML
<h1>canvas</h1>
<canvas style="left: -300px; border: 1px dotted;" height="585" width="400" id="c"></canvas>
<input type="button" id="svg3" value="set background" />
<input type="button" id="color" value="Change Image Color" />
JavaScript
function setBackgroundColor(color) {
if (background.isSameColor && background.isSameColor() || !background.paths) {
background.setFill(color);
} else if (background.paths) {
for (var i = 0; i < background.paths.length; i++) {
background.paths[i].setFill(color);
}
}
}
var canvas = new fabric.Canvas('c');
var background;
$("#svg3").click(function() {
fabric.loadSVGFromURL('http://upload.wikimedia.org/wikipedia/en/c/cd/-Islandshreyfingin.svg',
function (objects, options) {
background = fabric.util.groupSVGElements(objects, options);
background.set({
left: canvas.width/2,
top: canvas.height/2,
scaleY: canvas.height / background.width,
scaleX: canvas.width / background.width,
selectable: false
});
setBackgroundColor('red');
canvas.add(background);
canvas.renderAll();
});
});
$("#color").click(function(){
setBackgroundColor('blue');
canvas.renderAll();
});
working Demo Fidddle