CODEWITHSUNDEEP
javascripthtmlhtml5-canvasfabricjs
redGREENblue
redGREENblue

Reputation: 3126

Fabricjs copy part of canvas to another canvas

I am trying to copy part of a fabricjs canvas to another canvas.I am not sure if fabric has a method suitable for doing it (please let me know if that's the case) and after some searching I decided to do it without using fabric. But the canvas was already created using fabricjs. new fabric.Canvas(). Now when I try to copy a part of this canvas using context.drawImage(), I get a TypeError. I tried replacing the canvas with a img or a canvas created without using fabric and that works. So, I am guessing I may have to use the fabric canvas object a bit differently.

Upvotes: 4

Views: 5947

Answers (1)

coulix
coulix

Reputation: 3368

If you want to copy a rectangular zone from the canvas in order to export it as an image you could use the following:

      canvas.deactivateAll();
      canvas.renderAll();
      var ctx = canvas.getContext("2d");
      var myImageData = ctx.getImageData(box.x, box.y, box.w, box.h);
      var buffer = document.createElement('canvas');
      var bufferCtx = buffer.getContext("2d");
      buffer.width = box.w;
      buffer.height = box.h;
      bufferCtx.putImageData(myImageData, 0, 0);
      window.open(buffer.toDataURL('image/png'));

Upvotes: 5

Related Questions