Background Image - Cannot use loadimage and resize the image

[niveKKumar]

I am trying to load a local image and draw it to my background of my chart. Problem is, it doesnt resize and keeps the original width. Any idea why is that ?

const img = await loadImage(path);
const chartJSNodeCanvas = new ChartJSNodeCanvas({
    // backgroundColour: "#2f3136",
    width: 1000,
    height: 1000,
    chartCallback(c) {
      c.register({
        id: "logo",
        beforeDraw(chart) {
          const canvas = chart.canvas;
          const ctx = chart.canvas.getContext("2d");
          ctx.save();
          ctx.fillStyle = "#2f3136";
          const w = canvas.width;
          const h = canvas.height;
          ctx.fillRect(0, 0, w, h);
          ctx.globalAlpha = 0.15;
          const faktor = 1;
          img.width = w / faktor;
          img.height = h / faktor;
          ctx.drawImage(
            img as any,
            (canvas.width - img.width) / 2,
            (canvas.height - img.height) / 2,
            img.width,
            img.height
          );
          ctx.restore();
        },
      });
    },
    .
  });

With faktor 1 it should be as big as my canvas. My file has the size 500x500 which it keeps
In addition it seems that drawImage only allows HTMLImageElement, which as far I am aware of you, you cant create with a pure node project

[niveKKumar]

With svg it works 👀

[SeanSobey]

Hi there!

This works fine for me:

const { ChartJSNodeCanvas } = require('./index');
const { loadImage } = require('canvas');
const fs = require('fs/promises');

async function main() {

	const width = 400;
	const height = 400;
	const configuration = {
		type: 'bar',
		data: {
			labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
			datasets: [{
				label: '# of Votes',
				data: [12, 19, 3, 5, 2, 3],
				backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(255, 206, 86, 0.2)',
					'rgba(75, 192, 192, 0.2)',
					'rgba(153, 102, 255, 0.2)',
					'rgba(255, 159, 64, 0.2)'
				],
				borderColor: [
					'rgba(255,99,132,1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 206, 86, 1)',
					'rgba(75, 192, 192, 1)',
					'rgba(153, 102, 255, 1)',
					'rgba(255, 159, 64, 1)'
				],
				borderWidth: 1
			}]
		}
	};
	const buf = await fs.readFile('./banana.jpg');
	const img = await loadImage(buf);
	const chartJSNodeCanvas = new ChartJSNodeCanvas({
		width, height,
		chartCallback(c) {
			c.register({
				id: "logo",
				beforeDraw(chart) {
					const canvas = chart.canvas;
					const ctx = chart.canvas.getContext("2d");
					ctx.save();
					ctx.globalAlpha = 0.5;
					const scale = Math.max(canvas.width / img.width, canvas.height / img.height);
					// get the top left position of the image
					const x = (canvas.width / 2) - (img.width / 2) * scale;
					const y = (canvas.height / 2) - (img.height / 2) * scale;
					ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
					ctx.restore();
				},
			});
		}
	});
	const buffer = await chartJSNodeCanvas.renderToBuffer(configuration);
	await fs.writeFile('./test.png', buffer, 'base64');
}

main();

Looks like you are using canvas.drawImage incorrectly.

Also, note the use of node-canvas's loadimage, my apologies, the integration of this lib is not obvious enough and a constant source of issues. I hope to make this more intuitive going forward