Can we add putImageData to fabric canvas instead o

Question

fabric.Image.fromURL(hc.toDataURL(), function(img) { // add image onto canvas Canvas.add(img); img.hasControls = false; img.hasBorders = false; img.hasControls = false; img.hasRotatingPoint = false; img.selectable = false; });

Above code helps in rendering a image to canvas but I want to use something like putImageData/drawImage because I have to draw the image from another canvas . And as per real time operation using toDataURL for more than 5 MB images is very bad when performance comes to picture.

I also want to render the image on the middle of the canvas . Fabricjs just takes the image toDataURL and renders it as it is.

Any help will be appreciated.

Answer 1

fabric.Image() just like the row ctx.drawImage accepts a canvasElement as imageSource.

So you can just call it like

canvas.add(new fabric.Image(yourCanvasToDraw));

And if you want it centered in the canvas :

canvas.add(new fabric.Image(c, {left: canvas.width/2-c.width/2, top: canvas.height/2-c.height/2}));

Note that ctx.getImageData+ctx.putImageData is at least as slow as ctx.toDataURLwhich both are incredibly slower than ctx.drawImage