# TypeError when sketch hosted on a webserver but not when on my computer?

**URL:** <https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762>\
**Category:** Coding Questions\
**Created:** [April 14, 2020, 4:34am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762 "2020-04-14T04:34:15Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 14, 2020, 4:34am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/1 "2020-04-14T04:34:15Z")

</div>

So my p5js script script runs fine on the web editor and also when I run it in Atom but when I upload it to my web host and access the page from there, I get:

```auto
TypeError: cnv is undefined

```

or

```auto
TypeError: cannot read property 'position' of undefined

```

It’s in my windowResized function

```auto
function windowResized() {
  xCnvPos = (windowWidth - width) / 2;
  yCnvPos = (windowHeight - height) / 2;
  cnv.position(xCnvPos, yCnvPos); //here is when it happens
  if (button1 != undefined) {
    button1.position(xCnvPos + xbutton1Pos, yCnvPos + ybuttonPos);
    button2.position(xCnvPos + xbutton2Pos, yCnvPos + ybuttonPos);
  }
}

```

Why am I error free when running from my hard drive?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 14, 2020, 5:49am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/2 "2020-04-14T05:49:16Z")

</div>

You may try out replacing your variable _cnv_ w/ _\_renderer_. 💡

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 14, 2020, 7:35am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/4 "2020-04-14T07:35:16Z")

</div>

I think that did it.

BTW I changed the syntax(?) of your “Element relative to canvas” so that it’s easier to read for a new programmer. I might have lost some functionality though.

Have I?  
[https://editor.p5js.org/Bassam/sketches/tbZeQmX16](https://editor.p5js.org/Bassam/sketches/tbZeQmX16)

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 16, 2020, 1:02am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/5 "2020-04-16T01:02:51Z")

</div>

So that error is back.

```auto
Uncaught ReferenceError: _renderer is not defined
    at positionCanvasAndElements (sketch.js:454)
    at windowResized (sketch.js:465)
    at p5._main.default._onresize (p5.js:56983)

```

Does anyone get this?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 16, 2020, 1:16am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/6 "2020-04-16T01:16:17Z")

</div>

> [@Bassam](#):
>
> `at positionCanvasAndElements (sketch.js:454)`

There’s no function called **positionCanvasAndElements()** nor line #454 at your “sketch.js”.

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 16, 2020, 1:33am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/7 "2020-04-16T01:33:38Z")

</div>

There sure is I assure you. I just renamed the function so it was more descriptive.

```auto
function positionCanvasAndElements() {
	xCnvPos = (windowWidth - width) / 2;
	yCnvPos = (windowHeight - height) / 2;
	_renderer.position(xCnvPos, yCnvPos);
	if (button1 != undefined) {
		button1.position(xCnvPos + xbutton1Pos, yCnvPos + ybuttonPos);
		button2.position(xCnvPos + xbutton2Pos, yCnvPos + ybuttonPos);
	}
	if (button3 != undefined) {
		button3.position(xCnvPos + xbutton1Pos * 2 - 20, yCnvPos + ybuttonPos + 38);
	}
}

```

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 16, 2020, 1:40am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/8 "2020-04-16T01:40:15Z")

</div>

positionCanvasAndElements() is called in windowResized(). I call windowResized() after I create my canvas, just as you do in your element relative to canvas sketch GoToLoop.

```auto
function windowResized() {
	positionCanvasAndElements();
}

```

Here are the other errors/warnings I get but these ones are always there and they’re not red, they’re yellow:

```auto
Use of the orientation sensor is deprecated. p5.js:59061:25
Use of the motion sensor is deprecated. p5.js:59061:25
Use of mozImageSmoothingEnabled is deprecated. Please use the unprefixed imageSmoothingEnabled property instead. p5.js:62505:26

```

I thought this was programming but now I realize this is sorcery.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 16, 2020, 1:47am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/9 "2020-04-16T01:47:20Z")

</div>

> [@Bassam](#):
>
> There sure is I assure you.

On your posted link: 🔗

> **[p5.js Web Editor](https://editor.p5js.org/Bassam/sketches/tbZeQmX16)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

I can only see 36 lines at “sketch.js”! 🙈  
So `(sketch.js:454)` isn’t even possible! 🤪

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 16, 2020, 1:55am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/10 "2020-04-16T01:55:33Z")

</div>

My friend, I appreciate you looking into this firstly.

Second. This project has grown a lot in the past couple of days.

I’m hosting it on my webhost. I wonder if the problem lies there somehow? It runs error free on my computer but when I upload, blam!

If this sketch wasn’t related to a potential experimental study at my university, I would post all the code right now. But I’ve posted the pertinent parts already:

```auto
let cnv;
function setup() {
	pixelDensity(1);
	setVariables();
	cnv = createCanvas(cW + borderSpacer * 2, cH + borderSpacer * 2);
	//cnv.mouseClicked(checkClick);
	windowResized();

	readyCanvas();
	doTask();

	//showRequiredClicks = createP("Clicks required for full reveal: ~" + calClicksReq());
	showClicks = createP("Total clicks: " + clickCounter.toString());
}
function positionCanvasAndElements() {
	xCnvPos = (windowWidth - width) / 2;
	yCnvPos = (windowHeight - height) / 2;
	_renderer.position(xCnvPos, yCnvPos);
	if (button1 != undefined) {
		button1.position(xCnvPos + xbutton1Pos, yCnvPos + ybuttonPos);
		button2.position(xCnvPos + xbutton2Pos, yCnvPos + ybuttonPos);
	}
	if (button3 != undefined) {
		button3.position(xCnvPos + xbutton1Pos * 2 - 20, yCnvPos + ybuttonPos + 38);
	}
}

function windowResized() {
	positionCanvasAndElements();
}

```

I’m sure you think this is related to my n00bness, which no doubt it is, the problem still occurs erratically, unpredictably so much so that I can’t seem to move past it. I keep having to think about it.

It could be a genuine but, I’d love to report it if only I knew how and where.

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 16, 2020, 2:04am UTC](https://discourse.processing.org/t/typeerror-when-sketch-hosted-on-a-webserver-but-not-when-on-my-computer/19762/11 "2020-04-16T02:04:27Z")

</div>

Ok so the latest version is /\*! p5.js v1.0.0 February 29, 2020 \*/

The version I have is

Could this be an issue? I’ll test out with this newer version and report back.