HTML Canvas Library - Fabric JS with cornerstone

[Neil Panjwani]

How can I use an HTML5 canvas JS drawing library with cornerstone? I'm trying to use Fabric JS http://fabricjs.com/fabric-intro-part-1/#why_fabric .  When I initialize the fabric canvas it clears the existing dicom image in the stack. If I initialize the canvas first, before any images are loaded, then try to draw after the dicom is loaded, the canvas drawings do not appear. I'm initializing fabric the following way:

var canvas = new fabric.Canvas($("canvas").get(0));

This does grab the correct canvas because I am able to draw objects to the screen, but not without losing the original dicom image underneath.

Thanks!

Neil

[Erik Ziegler]

Hi Neil,

To be honest I don't really think you'll be able to do this. Cornerstone will redraw the entire canvas whenever anything changes which will erase anything you draw via Fabric. Likewise, I'd guess Fabric clear the whole canvas when enabling it as well.

Sorry!

[Chris Hafey]

Cornerstone exposes the canvas object during the CornerstoneImageRendered event so you can use whatever library you like during rendering.  Whether or not the other library can be used in this manner is more of an issue with the library than cornerstone (after all cornerstones purpose is to draw medical images).  I haven't used fabricjs so don't know how you might integrate it, but you might look for a way to disable its clearing of the canvas (maybe there is an option you can pass it, or maybe just comment out that code in the library).  If you have ideas on how cornerstones design can be enhanced to integrate better with fabricjs (or other libraries), feel free to make a proposal.