demo.html

<!DOCTYPE>

<html>
	<head>
		<title>cytoscape-canvas.js demo</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
		<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
		<script src="https://unpkg.com/cytoscape-canvas/dist/cytoscape-canvas.js"></script>
		<!-- for testing with local version-->
		<!-- <script src="src/cytoscape-canvas.js"></script> -->
		<style>
			#cy {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
		<script>
			const background = new Image();
			background.onload = () => {
				const cy = cytoscape({
					container: document.getElementById("cy"),
					style: [
						{
							selector: "node",
							css: {
								label: "data(name)",
							},
						},
						{
							selector: "edge",
							css: {
								"curve-style": "bezier",
								"target-arrow-shape": "triangle",
							},
						},
					],
					elements: {
						nodes: [
							{ data: { id: "j", name: "Jerry" }, position: { x: 150, y: 50 } },
							{ data: { id: "e", name: "Elaine" }, position: { x: 600, y: 50 } },
							{ data: { id: "k", name: "Kramer" }, position: { x: 150, y: 400 } },
							{ data: { id: "g", name: "George" }, position: { x: 600, y: 400 } },
						],
						edges: [
							{ data: { source: "j", target: "e" } },
							{ data: { source: "j", target: "k" } },
							{ data: { source: "e", target: "j" } },
							{ data: { source: "k", target: "g" } },
						],
					},
					layout: {
						name: "preset",
					},
				});

				const bottomLayer = cy.cyCanvas({
					zIndex: -1,
				});
				const canvas = bottomLayer.getCanvas();
				const ctx = canvas.getContext("2d");

				cy.on("render cyCanvas.resize", (evt) => {
					bottomLayer.resetTransform(ctx);
					bottomLayer.clear(ctx);
					bottomLayer.setTransform(ctx);

					ctx.save();
					// Draw a background
					ctx.drawImage(background, 0, 0);

					// Draw text that follows the model
					ctx.font = "24px Helvetica";
					ctx.fillStyle = "black";
					ctx.fillText("This text follows the model", 200, 300);

					// Draw shadows under nodes
					ctx.shadowColor = "black";
					ctx.shadowBlur = 25 * cy.zoom();
					ctx.fillStyle = "white";
					cy.nodes().forEach((node) => {
						const pos = node.position();
						ctx.beginPath();
						ctx.arc(pos.x, pos.y, 10, 0, 2 * Math.PI, false);
						ctx.fill();
					});
					ctx.restore();

					// Draw text that is fixed in the canvas
					bottomLayer.resetTransform(ctx);
					ctx.save();
					ctx.font = "24px Helvetica";
					ctx.fillStyle = "red";
					ctx.fillText("This text is fixed", 200, 200);
					ctx.restore();
				});
			};

			// Preload images
			background.src = "https://files.classcraft.com/classcraft-assets/images/event_scroll_middle.jpg";
		</script>
	</head>
	<body>
		<div id="cy" />
	</body>
</html>