# Problem with JSDoc createGraphics() annotation in my sketch

**URL:** https://discourse.processing.org/t/problem-with-jsdoc-creategraphics-annotation-in-my-sketch/36569
**Category:** Coding Questions
**Created:** [April 24, 2022, 7:15am UTC](https://discourse.processing.org/t/problem-with-jsdoc-creategraphics-annotation-in-my-sketch/36569 "2022-04-24T07:15:05Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![SNitaine](https://avatars.discourse-cdn.com/v4/letter/s/7993a0/32.png) [@SNitaine](https://discourse.processing.org/u/SNitaine)
#### Post date: [April 24, 2022, 7:15am UTC](https://discourse.processing.org/t/problem-with-jsdoc-creategraphics-annotation-in-my-sketch/36569/1 "2022-04-24T07:15:05Z")

</div>

When working with `createGraphics()` how do you set the correct JSDoc comment for the global variable `var pg` that is declared global outside of `setup()` and `draw()`.

let say we start with a simple sketch like this:

```javascript
var pg // Variable 'pg' implicitly has type 'any' in some locations where its type cannot be determined.

function setup() {
	createCanvas(500, 500)
	pg = createGraphics(width - 50, height - 50)
}

function draw() { 
	background(230)
	pg.background(40) // Variable 'pg' implicitly has an 'any' type.
	image(pg, 25, 25) // Variable 'pg' implicitly has an 'any' type
}

```

Right the editor have no idea about what pg is, it is an Any type. No idea about what method and properties are on that object.

```javascript
/**
* @type {p5.Graphics} pg
*/
var pg

function setup() {
	createCanvas(500, 500)
	pg = createGraphics(width - 50, height - 50)
}

function draw() { 
	background(230)
	pg.background(40)
	image(pg, 25, 25)
}

```

Trying to set the `@type` above the global variable `pg` declaration doesn’t work, since `Graphics` doesn’t exist out here. `'global.p5' has no exported member 'Graphics'.` but it is export from `p5.Graphics.js`.

So with that in mind, you can try to move it inside `setup()` by setting `createGraphics()` `@returns` to `{p5.Graphics}`.

```javascript
var pg

function setup() {
	createCanvas(500, 500)
	/**
	* @returns {p5.Graphics} pg
	*/
	pg = createGraphics(width - 50, height - 50)
}

function draw() { 
	background(230)
	pg.background(40)
	image(pg, 25, 25)
}

```

Can someone help me to do this right? 😃

thanks.

---

<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 26, 2022, 6:46pm UTC](https://discourse.processing.org/t/problem-with-jsdoc-creategraphics-annotation-in-my-sketch/36569/2 "2022-04-26T18:46:50Z")

</div>

It doesn’t make much sense documenting 3rd-party libraries you import to your code.

For that we should grab their existing type definition files:

> **[@types/p5](https://www.npmjs.com/package/@types/p5)**
>
> TypeScript definitions for p5. Latest version: 1.7.4, last published: 21 days ago. Start using @types/p5 in your project by running \`npm i @types/p5\`. There are 36 other projects in the npm registry using @types/p5.

But in order to use such files you’ll probably need to switch to TypeScript:

> **[TS Playground - An online editor for exploring TypeScript and JavaScript](https://www.typescriptlang.org/play)**
>
> The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

Take a look at my previous posts w/ TS sketch examples:

> [@Autocomplete and documentation for "imported" p5js](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927/14):
>
> When we use import in JS 2 things happen: The file becomes a JS module and it needs a \<script type=module\> to load inside the HTML. JS checks the import line if a file w/ that exactly path & name exists so it can load it as a module. As we can note the file “ml-matrix” doesn’t exist. Instead there are “matrix.js” & “matrix.umd.js”. However neither is a JS module but just vanilla JS code. The library’s types is called “matrix.d.ts”. But to make things worse “matrix.umd.js” is exposed as …

> [@G4js - developing a new GUI library for p5.js](https://discourse.processing.org/t/g4js-developing-a-new-gui-library-for-p5-js/36116/8):
>
> Formally I used [Atom.io](http://Atom.io) w/ some extensions for TS. But currently I’m in [VSC](https://code.visualstudio.com), which got good TS support out-of-the-box. I also have both [NodeJs.org](http://NodeJs.org) & [Git](https://git-scm.com) installed to deal w/ [NPM](https://www.npmjs.com) packages & [GitHub](https://github.com) repos. Well, I’ve ended up creating a p5js library template repo just to answer that: After unpacking the downloaded project file: Double-click file “setup.bat” so it creates the subfolder “node\_modules/” and globally installs the TS compiler “tsc”, the local file server “serve”, the p5js libra…