How to create external drawing.

[somu2324]

I am able to create graph view successfully. Now I want to add some external drawing with the graph view.
For this I want canvas context object. How can get this.

for example: In the attached image I have display two rect which is not a part of graph view but I want to display this with graph. How can I archive this.

It will be helpful for me if somehow I can get context object as a global object.

[vasturiano]

@somu2324 you can add additional drawing functionality associated with each node via .nodeCanvasObject((node, context) => ...). If you only wish to extend the node drawing and not replace it, you can set .nodeCanvasObjectMode(() => 'after').

The reason why the global context is not exposed is because the canvas is wiped and re-drawn at every frame, due to the iteration of the force layout. So, any draw operations you would do externally would immediately disappear.

Another way you could approach this is to have a separate canvas that you maintain and exactly overlaps visually with the force directed graph (using absolute positioned css). Then you can fully customize the drawing of the additional elements in your project.