I have data, which I want to represent as a graph in web browser. As far as I know - it's not a problem right now. However, I want to be able dynamically draw the content - an icon - for every node.
This picture/icon depends on the characteristic of the node and cannot be stored as a preset image - should be drawn while we are building a graph. I have already implemented drawing the icon in canvas (maybe it's not a good idea - we will see), but I'm not sure how to draw the icon on a node. I tried out D3 and Cytoscape.js.
Simplified example of the icon could be a rectangle with a number of dots. This number and dots' positions are specified on the node.
How would I draw the image from the canvas onto a node's background, using D3 or Cytoscape.js etc?
Background images are natively supported in Cytoscape.js with many options. For your usecase, it's easy:
(1) Export the image from your canvas to PNG or JPG: canvas.toDataURL("image/png");
(2) Set the background-image in the style for your node in Cytoscape.js with the data URI you got from the canvas: http://js.cytoscape.org/#style/background-image
You can do the same thing with SVG images, too. You can even use libraries like svg.js to build your SVG easily. Again, just get the data URI for the SVG and specify it as the background image.
You can use a mapper function if you want to keep image generation organised in your stylesheet, too.