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

Question

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?

Solution 1

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
});

Solution 2

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

Comments

[amit gupta]

nice its work for me .how could i set this svg image to my canvas background, do you have any idea for it ?

[Sergiu Paraschiv]

Why not set selectable: false on that shape?

[amit gupta]

if i set selectable: false then how can i select it next time when i wish to change its fill color Fiddle demo

[amit gupta]

is there any method to change svg fill color without using active object function 'var canvas.getActiveObject();'

[Sergiu Paraschiv]

That has nothing to do with fill color. As long as you have a reference to shape you can change it. What selectable: false does is it removes the move/scale/rotate controls so that users can't change it.

[Sergiu Paraschiv]

So yes, as long as you can shape.paths[i].setFill(colorSet); why would you care about getActiveObject?

[amit gupta]

how to use shape.paths[i].setFill(colorSet); can you provide me demo with update my fiddle for this jsfiddle.net/hxjZa/7

[amit gupta]

you are great boss ! i really appreciate your work it solve my all problem.