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
<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" />
$(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:
<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" />
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With