How to use canvas?

[elementalTIMING]

After playing with the new TS template and the CLI I discovered a few issues related to rollup. My plan was to convert a plugin to the new structure. Here I need a function that imports external images and writes text to a canvas. So I did

import { action, DidReceiveSettingsEvent, KeyDownEvent, SingletonAction } from '@elgato/streamdeck';
import streamDeck from '@elgato/streamdeck';
import { loadImage, createCanvas } from 'canvas';

const logger = streamDeck.logger.createScope('DRAWING');

type DrawingSettings = {
	value: number;
};

@action({ UUID: 'MY UUID' })
export class Drawing extends SingletonAction<DrawingSettings> {
	public action: any;

	async onKeyDown(ev: KeyDownEvent<DrawingSettings>): Promise<void> {
		this.action = ev.action;
		this.setImageURL('https://m.media-amazon.com/images/I/71PmSM2KkIL._AC_UF894,1000_QL80_.jpg', 'test', null, this.action);
	}

	/**
	 * Set an action image from a URL and optionally add some text to it
	 */
	setImageURL(imageURL: string, texts: any, titleParameters: any, context: string) {
		const size = 72;
		const padding = 5; 

		logger.debug('++++++' + imageURL);

		loadImage(imageURL).then(image => {
			const canvas = createCanvas(image.width, image.height);

			// const ctx = canvas.getContext( '2d' );
			// canvas.height = size;
			// canvas.width = size;

			// ctx.drawImage( image, 0, 0, image.width / 4, image.height / 4 );

			// if ( texts ) {
			// 	ctx.textBaseline = 'top';
			// 	ctx.textAlign = 'center';
			// 	ctx.shadowColor = '#000000';
			// 	ctx.shadowOffsetX = 1;
			// 	ctx.shadowOffsetY = 1;
			// 	if (titleParameters) {
			// 		const fontStyle = titleParameters.fontStyle === 'Regular' ? '' : titleParameters.fontStyle;
			// 		ctx.font = `${fontStyle} ${titleParameters.fontSize}pt ${titleParameters.fontFamily || 'Arial'}`;
			// 		ctx.fillStyle = titleParameters.titleColor;
			// 	}
			// 	if (typeof texts === 'string') texts = { top: texts };
			// 	if (texts.top) ctx.fillText(texts.top, canvas.width / 2, padding);
			// 	if (texts.middle) ctx.fillText(texts.middle, canvas.width / 2, (canvas.height - titleParameters.fontSize) / 2);
			// 	if (texts.bottom) ctx.fillText(texts.bottom, canvas.width / 2, canvas.height - titleParameters.fontSize - padding);
			// }

			// this.action.setImage( canvas.toDataURL( 'image/png' ), 0, null, context );
		});
	}
}

To make this work I needed further to import:

npm install canvas
npm install @rollup/plugin-json

Furthermore it was necessary to manually edit ../../../node_modules/canvas/package.json. RollUp expected a ;at the end of the file. BTW: only this single fact that I have to do modifications of files inside node_modulesis an absolute NO-GO to use this template.

But now, after running npm run build, the following errors come up:

> build
> rollup -c

src/plugin.ts → com.elementaltiming.sscm.sdPlugin/bin/plugin.js...
(!) [plugin typescript] src/actions/drawing.ts (3:48): @rollup/plugin-typescript TS7016: Could not find a declaration file for module 'canvas'. '/Volumes/Daten/Websites/SSCM.v3/node_modules/canvas/index.js' implicitly has an 'any' type.
/Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/src/actions/drawing.ts:3:48

3 import { Image, loadImage, createCanvas } from 'canvas';
                                                ~~~~~~~~

(!) [plugin typescript] src/actions/drawing.ts (101:28): @rollup/plugin-typescript TS7006: Parameter 'image' implicitly has an 'any' type.
/Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/src/actions/drawing.ts:101:28

101   loadImage(imageURL).then(image => {
                            ~~~~~

[!] (plugin commonjs--resolver) SyntaxError: Unexpected non-whitespace character after JSON at position 2009
../../../node_modules/canvas/index.js
    at JSON.parse (<anonymous>)
    at findPackageJson (file:///Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/@rollup/plugin-node-resolve/dist/es/index.js:316:36)
    at getPackageJson (file:///Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/@rollup/plugin-node-resolve/dist/es/index.js:679:35)
    at resolveWithExportMap (file:///Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/@rollup/plugin-node-resolve/dist/es/index.js:851:20)
    at resolveImportSpecifiers (file:///Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/@rollup/plugin-node-resolve/dist/es/index.js:951:26)
    at resolveLikeNode (file:///Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/@rollup/plugin-node-resolve/dist/es/index.js:1187:37)
    at Object.handler (file:///Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/@rollup/plugin-node-resolve/dist/es/index.js:1311:26)
    at PluginDriver.hookFirstAndGetPlugin (/Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/rollup/dist/shared/rollup.js:898:28)
    at resolveId (/Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/rollup/dist/shared/rollup.js:19440:26)
    at ModuleLoader.resolveId (/Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm/node_modules/rollup/dist/shared/rollup.js:19624:15)

My questions are now:

• do I something wrong?
• is it a bug?
• if I don't do anything wrong and if it's not a bug - how can work with canvases? Are there any examples working together with the RollUp?

Thank you for any help!

[GeekyEggo]

This looks to be a configuration issue; to help diagnose what's causing it, could I ask you to share your:

• tsconfig.json file.
• The version of canvas you're using.
• Your rollup configuration file.

[elementalTIMING]

Thx for your response. I haven't changed anything in the tsconfig and rollup because all changes (from what I found e.g. on stackoverflow) didn't worked for me. And because there was nothing special written in the Elgato repro, I expected that it should work "out-of-the-box". I'm really looking forward to your support and help.

Here comes the data:

"canvas": "^2.11.2",

tsconfig.json

{
	"extends": "@tsconfig/node20/tsconfig.json",
	"compilerOptions": {
		"customConditions": ["node"],
		"module": "ES2022",
		"moduleResolution": "Bundler"
	},
	"include": ["src/**/*.ts"],
	"exclude": ["node_modules"]
}

rollup.config.mjs

import commonjs from "@rollup/plugin-commonjs";
import nodeResolve from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";
import typescript from "@rollup/plugin-typescript";
import path from "node:path";
import url from "node:url";

const isWatching = !!process.env.ROLLUP_WATCH;
const sdPlugin = "PLUGINNAME";

/**
 * @type {import('rollup').RollupOptions}
 */
const config = {
	input: "src/plugin.ts",
	output: {
		file: `${sdPlugin}/bin/plugin.js`,
		sourcemap: isWatching,
		sourcemapPathTransform: (relativeSourcePath, sourcemapPath) => {
			return url.pathToFileURL(path.resolve(path.dirname(sourcemapPath), relativeSourcePath)).href;
		}
	},
	plugins: [
		{
			name: "watch-externals",
			buildStart: function () {
				this.addWatchFile(`${sdPlugin}/manifest.json`);
			},
		},
		typescript({
			mapRoot: isWatching ? "./" : undefined
		}),
		nodeResolve({
			browser: false,
			exportConditions: ["node"],
			preferBuiltins: true
		}),
		commonjs(),
		!isWatching && terser(),
		{
			name: "emit-module-package-file",
			generateBundle() {
				this.emitFile({ fileName: "package.json", source: `{ "type": "module" }`, type: "asset" });
			}
		}
	]
};

export default config;

[GeekyEggo]

Based on the provided configuration, the types should be working okay. If you're using VS Code, one thing to try would be reloading the developer window via:

1. Opening command palette (Ctrl + P on Windows)
2. Enter > Developer: Reload Window.

This often helps to resolve anomalies with TypeScript.

One other thing to check is the versions that were resolved by npm when installing packages. Could you post the results of running npm list in the terminal please?

[elementalTIMING]

This is the output of my npm list. As you can see it's still very basic yet. (yesterday I switched from [email protected] to [email protected])

sscm@ /Volumes/Daten/Websites/SSCM.v3/external-controllers/streamdeck/sscm
├── @elgato/[email protected]
├── @elgato/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @tsconfig/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[elementalTIMING]

I gave up trying to use a canvas and switched to SVG.