# Global variable in "window.VAR\_NAME" construct returns error

**URL:** <https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351>\
**Category:** web dev\
**Created:** [January 10, 2015, 12:21am UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351 "2015-01-10T00:21:26Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 10, 2015, 12:21am UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/1 "2015-01-10T00:21:26Z")

</div>

Hello, I am working on a porting of my Python implementation of Pong to Javascript. I need to work with global variables - which I know are kind of a pain in JS. I decided to use the `window.VAR_NAME` construct. But this:

```
var window.canvasTag = document.getElementsByTagName('canvas')[0];

```

for some reason returns:

```
SyntaxError: Unexpected token '.'. Expected ';' after var declaration.

```

What am I missing?

Thank you

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 10, 2015, 12:38am UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/2 "2015-01-10T00:38:47Z")

</div>

Remove the `var` text and just use `window.canvasTag` = … 🙂

That should do the trick. All you are doing is adding a new property to the existing `window` object.

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 10, 2015, 8:36am UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/3 "2015-01-10T08:36:19Z")

</div>

I dedided to use another function to enclose global variables. I am now trying to draw the paddle as a line but it does not work and when I try to access the `paddle1` variable I am returned `undefined`. This is my code so far - thank you for your enlghtening solutions:

```
//global variables
function globals() {
    window.CANVASTAG = document.getElementsByTagName('canvas')[0];
    window.CANVAS = CANVASTAG.getContext('2d');
    window.HEIGHT = window.innerWidth;
};

//prototype objects
function Paddle([start_x, start_y], [end_x, end_y]) {
    this._paddle_line_start = [start_x, start_y],
    this._paddle_line_end = [end_x, end_y]
};

//prototype objects methods
Paddle.prototype.draw = function() {
    CANVAS.beginPath();
    CANVAS.lineWidth="2";
    CANVAS.strokeStyle="white";
    CANVAS.moveTo(this._paddle_line_start[0],this._paddle_line_start[1]);
    CANVAS.lineTo(this._paddle_line_end[0],this._paddle_line_end[1]);
    CANVAS.stroke();
};

//draw scene
function drawScene() {
    CANVASTAG.style.backgroundColor = 'blue';
    CANVASTAG.style.display = 'block';
    function resizeCanvas() {
        CANVASTAG.style.width = window.innerWidth + "px";
        setTimeout(function() {
            CANVASTAG.style.height = window.innerHeight + "px";
        }, 0);
    };
    window.onresize = resizeCanvas;
    resizeCanvas();

    //prototype objects instances
    var paddle1 = new Paddle([30, HEIGHT / 2 - 15], [30, HEIGHT / 2 + 15])
    paddle1.draw();
};

//call function scene on page load
window.onload = function() {
    globals();
    drawScene();
};
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 10, 2015, 8:10pm UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/4 "2015-01-10T20:10:38Z")

</div>

Did you set a breakpoint and step through the code to see where the flaw is happening? If you haven’t, that is a great way to figure out what may be wrong with your code. I use Chrome as my primary browser, and I recorded a video to explain how to set breakpoints and inspect your code using it: [https://www.youtube.com/watch?v=k\_G2kHiqU60](https://www.youtube.com/watch?v=k_G2kHiqU60)

For more cases, the Chrome documentation is great: [https://developer.chrome.com/devtools/docs/javascript-debugging](https://developer.chrome.com/devtools/docs/javascript-debugging)

Let me know if that leads you in the right direction. If it doesn’t, reply back as well, and I can take a closer look 🙂

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 11, 2015, 1:01am UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/5 "2015-01-11T01:01:06Z")

</div>

Thank you Kirupa, that was really helpful to tackle a couple of mistakes in the code, but the white line I am trying to draw doesn’t show up. I believe there is just something in the way Javascript draws objects on the canvas that I am missing. Can you please have a look? Thank you very much for your contribute to my learning!

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [January 11, 2015, 1:47am UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/6 "2015-01-11T01:47:58Z")

</div>

Did you fix this part?:

`function Paddle([start_x, start_y], [end_x, end_y])`

It should read something more like:

`function Paddle(start, end)`

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 11, 2015, 8:51am UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/7 "2015-01-11T08:51:40Z")

</div>

Thank you krilnon, I posted the code above and that part is still function `Paddle([start_x, start_y], [end_x, end_y])`. Why is this incorrect?

Thank you!

---

<div class="post-metadata">

**Author:** ![icio](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/icio/32/484_2.png) [@icio](https://forum.kirupa.com/u/icio)\
**Post date:** [January 11, 2015, 3:50pm UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/8 "2015-01-11T15:50:31Z")

</div>

JavaScript doesn’t implement parameter expansion in the way that Python does (it looks like what’s where you’re getting your inspiration). The way you invoke a function in JavaScript only ever translates into one set of `arguments`:

```javascript
function f() { console.log(arguments); }
f([1, 2, 3], 1);
// {0: [1, 2, 3], 1: 1}

```

And JavaScript allows you to define named arguments of the function to take the values of `arguments[0]`, `arguments[1]`, etc. The arguments are never expanded out depending on the argument type and the signature of the function. `function f([a, b, c], d)` is simply not a supported syntax. You should see a `SyntaxError: Unexpected token [` in the browser console. You’ve got a few options:

```javascript
function Paddle(start, end) {
    this._paddle_line_start = start;
    this._paddle_line_end = end;
}
new Paddle([x1, y1], [x2, y2]);

function Paddle(start, end) {
    this._paddle_lne_start = [start.x, start.y];
    this._padde_line_end = [end.x, end.y];
}
new Paddle({x: x1, y: y1}, {x: x2, y: y2});

function Paddle(x1, y1, x2, y2) {
    this._paddle_line_start = [x1, y1];
    this._paddle_line_start = [x2, y2];
}
new Paddle(x1, y1, x2, y2);

```

Note that in the [MDN documentation of Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function#Syntax) the `[` and `]` in the constructor definition denote _optional_ arg1 through argN, not literal brackets.

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 11, 2015, 7:20pm UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/9 "2015-01-11T19:20:57Z")

</div>

Dear Icio, thank you so much for stopping by and trying to help out.

I understand what you mean. I refactored the code a bit and also changed the lines the way you suggested (3rd suggestion, exactly). The code now looks like the following - no luck in getting it to work, though:

```
 //initialize canvas and set globals
function initialize() {
    window.CANVASTAG = document.getElementsByTagName('canvas')[0];
    window.CANVAS = CANVASTAG.getContext('2d');
    window.HEIGHT = window.innerHeight;

    CANVASTAG.style.backgroundColor = 'blue';
    CANVASTAG.style.display = 'block';

    function resizeCanvas() {
        CANVASTAG.style.width = window.innerWidth + "px";
        setTimeout(function() {
            CANVASTAG.style.height = window.innerHeight + "px";
        }, 0);
    };
    window.onresize = resizeCanvas;
    resizeCanvas();
};

//prototype objects
function Paddle(start_x, start_y, end_x, end_y) {
    this._paddle_line_start = [start_x, start_y];
    this._paddle_line_end = [end_x, end_y];
};

//prototype objects methods
Paddle.prototype.draw = function() {
    CANVAS.beginPath();
    CANVAS.lineWidth="2";
    CANVAS.strokeStyle="white";
    CANVAS.moveTo(this._paddle_line_start[0],this._paddle_line_start[1]);
    CANVAS.lineTo(this._paddle_line_end[0],this._paddle_line_end[1]);
    CANVAS.stroke();
};

//draw scene
function drawScene() {
    //prototype objects instances
    var paddle1 = new Paddle(30, HEIGHT / 2 - 15, 30, HEIGHT / 2 + 15);
    paddle1.draw();
};

//call function scene on page load
window.onload = function() {
    initialize();
    drawScene();
};
```

---

<div class="post-metadata">

**Author:** ![Mad\_Griffith](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mad_griffith/32/7145_2.png) [@Mad\_Griffith](https://forum.kirupa.com/u/Mad_Griffith)\
**Post date:** [January 12, 2015, 1:36pm UTC](https://forum.kirupa.com/t/global-variable-in-window-var-name-construct-returns-error/465351/10 "2015-01-12T13:36:03Z")

</div>

I discovered that the post above actually works. The problem was that the canvasResize function, by doing a raw resize of the canvas, was in fact messing up the sizes and positions of my objects. I have temporarily given the canvas a fixed size and will attempt later at working on a solution to having the game full-size.

Thank you everybody for your help.