The given canvas parameter is not an HTMLCanvasElement object

Help & Questions
1

I am getting this error:

Uncaught (in promise) Error: The given canvas parameter is not an HTMLCanvasElement object.

Here is my code:

                const canvas = document.createElement('canvas');
		canvas.width = 640;
		canvas.height = 480;

		async function initializeDeepArPackage() {
			const DeepAR = await window.deepar.initialize({
				licenceKey: LICENCE_KEY,
				canvas: canvas,	
				effect:'https://cdn.jsdelivr.net/npm/deepar/effects/aviators'
			});

			canvasContainer.appendChild(canvas);
		}

What might be the cause?

2

Hi there, and thanks for the question :slight_smile:

I’ve done some testing with code similar to what you have posted, and I wasn’t able to get the same error. DeepAR should accept a programatically generated canvas like you have posted just fine.

One thing to check before we look further, are you running this code in the browser? If you run document.createElement('canvas') in a node server it will not return a canvas element, which could cause an error like you’re seeing.

Another thing to try - does it work if you create the canvas in HTML beforehand and then pass that to DeepAR?

Like:

index.html:

<canvas width="640" height="360" id="deepar-canvas"></canvas>

index.js:

const deepAR = await deepar.initialize({
  licenseKey: 'your_license_key_here', 
  canvas: document.getElementById('deepar-canvas'),
  effect: 'https://cdn.jsdelivr.net/npm/deepar/effects/aviators' 
});
3

For some reason using window.document.createElement(‘canvas’) solved the issue.

1 Like
4

Great! I have no idea why but I’m glad it worked for you :sunglasses: