I started learning p5.js some days ago, and now I wanted to use IntelliJ IDEA instead of the p5.js online editor. Most things like the setup(), draw() and ellipse() functions work as expected, but the createCanvas() function doesn't - it is underlined green and the error message says "Unresolved function or method createCanvas()".

I tried using VSCode, and there it worked perfectly, but I prefer to use IntelliJ, and so I wanted to know if and if yes how I can get it to work in IntelliJ.

<script src="p5.js"></script> //p5.js is the file with all the code from the official p5js homepage.
<script src="sketch.js"></script> //sketch.js is the file where my code that should be executed is located

function setup() { //The setup() function is recognized as expected,
    createCanvas(1000, 1000); //But the createCanvas() function isn't.
}

I started learning p5.js some days ago, and now I wanted to use IntelliJ IDEA instead of the p5.js online editor. Most things like the setup(), draw() and ellipse() functions work as expected, but the createCanvas() function doesn't - it is underlined green and the error message says "Unresolved function or method createCanvas()".

I tried using VSCode, and there it worked perfectly, but I prefer to use IntelliJ, and so I wanted to know if and if yes how I can get it to work in IntelliJ.

<script src="p5.js"></script> //p5.js is the file with all the code from the official p5js.org homepage.
<script src="sketch.js"></script> //sketch.js is the file where my code that should be executed is located

function setup() { //The setup() function is recognized as expected,
    createCanvas(1000, 1000); //But the createCanvas() function isn't.
}

• javascript
• intellij-idea
• p5.js

• The setup() function isn't being "recognized" by IntelliJ; you're defining a function called setup(). There shouldn't be anything special about the p5.js library, so you should follow whatever steps you normally follow to load a JavaScript library in IntelliJ. – Kevin Workman Commented Nov 4, 2019 at 17:24
• You can either download it from CDN (jetbrains.com/help/webstorm/…) or add non-minified p5.js file as a library (jetbrains.com/help/webstorm/…). – Oksana Commented Nov 5, 2019 at 15:49
• @KevinWorkman @Oksana Thanks for your reply, I have never loaded a library in IntelliJ, so I just followed the link on the jetbrains website. But that didn't change anything, the createCanvas() function still isn't recognized. I also tried the downloading it from CDN, didn't work for me either. I assume that's some kind of bug from IntelliJ's side and am going to continue using VSCode. – noassl Commented Nov 6, 2019 at 16:39
• @littlegamer757 I doubt it's a bug in IntelliJ. My guess is that JavaScript requires some setup that you haven't done. There are instructions here. But in the end you should use whatever editor you're comfortable with. I normally use a basic text editor when I'm working with JavaScript and P5.js. – Kevin Workman Commented Nov 6, 2019 at 17:05
• @KevinWorkman I already configured everything listed in the guide – noassl Commented Nov 7, 2019 at 19:51

2 Answers 2

p5 functions are defined as p5.prototype.<function name> = function(){}, so the IDE expects a namespace here... As a workaround, please try installing p5 typings: in Preferences | Languages & Frameworks | JavaScript | Libraries, press Downloads..., select p5 from the list. This should solve the problem

I used to mimic the p5js online editor in IntelliJ IDEA by using the Live Edit plugin in combination with split screening Chrome and IntelliJ. The plugin will automatically update your HTML/JS in the Chrome window, s.t. you can instantly see the effects of your changes to your p5js code. It will only work when you run your HTML/JS file in debug mode.

Here's an example: