engine: TypeError: this.canvas.getBoundingClientRect is not a function problem

I’m using PlayCanvas 1.24.0-dev, Firefox browser This is my error when I test samples:

TypeError: this.canvas.getBoundingClientRect is not a function playcanvas.js:5089:35
    updateClientRect playcanvas.js:5089
    GraphicsDevice playcanvas.js:4607
    Application playcanvas.js:22962

P/S: Chome browser is not working with the same error

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

Put your code in window.onload or load event listener, the <canvas> probably doesn’t exist at the moment you execute that script (e.g. in <head>)

	window.addEventListener("load", function(event) {
		// var app = ...
	});

kungfooman on Oct 19, 2019

Closing this because it looks like a bug in the reporter’s code.

willeastcott on Oct 27, 2019

Works too, but I prefer to make my JS/TS code independent from whatever is in your HTML files. Doesn’t matter then if you spawn one instance or ten, everything is nicely encapsulated:

export class Whatever {
	canvas: HTMLCanvasElement;
	app: pc.Application;

	constructor() {
		var canvas = <HTMLCanvasElement> document.createElement("canvas");
		this.app = new pc.Application(canvas, {
			mouse: new pc.Mouse(canvas),
			keyboard: new pc.Keyboard(window),
			touch: new pc.TouchDevice(document.body),
			elementInput: new pc.ElementInput(canvas),
			vr: true
		});
		document.body.appendChild(canvas);
		canvas.focus(); // focus the canvas for keyboard input
		this.app.start();
		this.canvas = canvas;
		this.app.root.name = "root";
		// ...
	}
}

window.addEventListener("load", function(event) {
    var whateverA = new Whatever();
    var whateverB = new Whatever();
    Object.assign(window, {
        whateverA,
        whateverB
    })
});

kungfooman on Oct 26, 2019