2

I have a component that is consuming fabricjs canvas content on the event "after:render", this works well with all the functions like adding objects, moving them etc.

However when it come to free drawing, the "after:render" event only fire once the drawing is completed, ie on mouse up event. I tried to read the canvas data while the mouse is drawing but with no luck, apparently the contents is not yet rendered onto the canvas during drawing.

I understand that from this PR https://github.com/fabricjs/fabric.js/pull/2895 that the free drawing draws on this contextTop element, my question is can I read the data from it? Or is there anyway to force fabric to render free drawing contents before mouse up? I have tried renderAll() with little luck.

Thanks!

Richard.Wang
  • 121
  • 2
  • 4

1 Answers1

2

I think you can do the following:

var points = canvas.freeDrawingBrush._points;
var pathData = canvas.freeDrawingBrush.prototype.convertPointsToSVGPath.call(canvas.freeDrawingBrush, points);

This should give you the actual path data string to create a path in the system you prefer.

AndreaBogazzi
  • 14,323
  • 3
  • 38
  • 63
  • Hey Andrea thanks for helping, but this will only get the path data right? I am more interested in the pixel color data generated by the brush from the canvas. – Richard.Wang Jul 26 '18 at 08:59