jsGraph background image or canvas

[heinemannj]

Is there any possibility to add an image or canvas as a background to jsGraph SVG?

I'm working on Colorimetry javascript libs which have this kind of requirements and Google chart which I'm using right now has a lot of other limitations.

Examples and goals:

[heinemannj]

I've found the following tricky workarround:

const jsgraphStyle = {
	id: 'chart1',
	width: 800,
	height: 300,
	backgroundImage: './background.png',
	backgroundImageWidthCorrection: 29,
	backgroundImageHeightCorrection: 32
}

let documentElementId = document.getElementById(jsgraphStyle.id);
const graph = Graph.fromJSON(jsgraph, documentElementId);

if (jsgraphStyle.backgroundImage) {
	let imgage = await getMeta(jsgraphStyle.backgroundImage);
	let graphWidth = graph.width - graph.innerWidth + imgage.width + jsgraphStyle.backgroundImageWidthCorrection;
	let graphHeight = graph.height - graph.innerHeight + imgage.height + jsgraphStyle.backgroundImageHeightCorrection;

	graph.resize(graphWidth, graphHeight);
	graph.draw();
	graph.updateLegend();

	let drawingSpace = {
		left: graph.drawingSpaceMinX,
		top: graph.drawingSpaceMinY,
		width: graph.drawingSpaceWidth,
		height: graph.drawingSpaceHeight
	}

	documentElementId.style.backgroundImage = `url('${jsgraphStyle.backgroundImage}')`;
	documentElementId.style.backgroundRepeat = 'no-repeat';
	documentElementId.style.backgroundSize = `${drawingSpace.width}px ${drawingSpace.height}px`;
	documentElementId.style.backgroundPosition = `${drawingSpace.left}px ${drawingSpace.top}px`;
} else {
	graph.resize(jsgraphStyle.width, jsgraphStyle.height)
	graph.draw();
	graph.updateLegend();
}

// Sub function for image metadata (height and width)
//
function getMeta(url) {
	return new Promise((resolve, reject) => {
		let image = new Image();
		image.onload = () => resolve(image);
		image.onerror = () => reject();
		image.src = url;
	});
}

[NPellet]

I think this should be possible with a shape put on the first layer.
But I think by default it would end up over the grid, and not under.

Something I'll think about