CODEWITHSUNDEEP
javascriptcanvasfabricjs
ajayramesh
ajayramesh

Reputation: 3814

Set background image for Fabric Canvas dynamically

I want to add draw shapes on a Image, so decided to use Fabric JS. I am able to get all shapes and objects working well. Now How do I background set exactly to Image. The Image is dynamic, I want to draw on top of that image, and basically store the annotations of objects for backend processing.

Existing solution using Canvas

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 903;
canvas.height = 657;


var background = new Image();
background.src = "http://www.samskirrow.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

Reference - https://stackoverflow.com/a/14013068/2094670 I like this solution. Live Demo

My Current Fabric JS Code

// Initialize a simple canvas
var canvas = new fabric.Canvas("c", {
    hoverCursor: 'pointer',
    selection: true,
    selectionBorderColor: 'green',
    backgroundColor: null
});

// Define the URL where your background image is located
var imageUrl = "../dog.jpg";

// Define
canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), {
    // Optionally add an opacity lvl to the image
    backgroundImageOpacity: 0.5,
    // should the image be resized to fit the container?
    backgroundImageStretch: false
});

Html

   <canvas id="c"></canvas>

Problem.

The image of dog is full hd image, however I see only portion of it. How to do render the background image to its actual height and width using Fabric Canvas ? Since Images are comming dynamically, I might not know exact height and width to hardcode it.

Upvotes: 0

Views: 4255

Answers (1)

Caleb Taylor
Caleb Taylor

Reputation: 3230

Here's the way to set canvas size base on image size via fabric.js.

It's done initiating the Fabric canvas inside the onload callback, that way we are able to get the image width and height, then set them into the setDimesions method.

img.onload = function () {
  ... 

  canvas.setDimensions({ width: img.width, height: img.height });
};


var imageUrl = "http://i.imgur.com/yf6d9SX.jpg";
var background = new Image();
background.src = imageUrl;

// wait for the image to load, then set Fabric Canvas on the callback that runs after image finishes loading
background.onload = function () {
  var canvas = new fabric.Canvas("c", {
    hoverCursor: "pointer",
    selection: true,
    selectionBorderColor: "green",
    backgroundColor: null,
  });

  // set canvas width and height based on image size
  canvas.setDimensions({ width: background.width, height: background.height });
  canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), {
    // Optionally add an opacity lvl to the image
    backgroundImageOpacity: 0.5,
    // should the image be resized to fit the container?
    backgroundImageStretch: false,
  });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<canvas id="c"></canvas>

Upvotes: 1

Related Questions