3

How to rewrite the following code with fabric js?

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

While using fabric js, it is not returning the context. Is there any way to return the context? I tried following code.

var fabricCanvas = new fabric.Canvas(ccr.options.candleCanvasId);
fabricCanvas.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

But it gave me an error "fabricCanvas.drawImage is not a function". How can I use the drawImage() with fabric js?

Edit

Using clipTo() in fabric js allows to achieve the crop functionality. But I want to modify the image shape. Check this link. How to bend/curve a image in html5 canvas . Here it is done by re drawing the image by changing the destination x and y positions. Is there any option in fabric js to get the context to use html5's default functions? Or is there any equivalent function for drawImage() ?

Community
  • 1
  • 1
Sajith
  • 2,842
  • 9
  • 37
  • 49

1 Answers1

4

You do not draw an image. You give the image to fabric and let fabric draw it. Example: http://fabricjs.com/fabric-intro-part-1#images

var imgInstance = new fabric.Image(imgElement, {
  left: dx,
  top: dy,
  width: dwidth,
  height: dheight,
  clipTo: function (ctx) {
    ctx.rect(dwidth / 2 - sx, dheight / 2 - sy, swidth, sheight);
  }
});
fabricCanvas.add(imgInstance);
Stephan Bijzitter
  • 4,425
  • 5
  • 24
  • 44