This is a question I gave quite a lot of thought before embarking on my Canvas API tutorials, so I’ll try to offer as comprehensive (but concise) a comparison as I can.
What is p5js?
From the get-go, both Processing and p5js (both part of the umbrella Processing Foundation) were designed to be approachable to artists, designers, educators and anyone else at the start of their coding journey.
Pros of p5js
- Beginner-friendly: It definitely achieved its goal of being approachable to the uninitiated.
- Large community: Several forums exist where you can get help and advice, and it has an active github repository with lots of contributors.
- Resources: Lots of high-quality books and tutorials are readily available. In particular, check out Dan Shiffman’s infectiously enthusiastic video tutorials, Lauren McCarthy’s Getting Started with P5.Js or Tariq Rashid’s Make Your Own Algorithmic Art.
- Documentation: the p5js website has a very comprehensive and well laid-out reference with lots of examples.
- Convenience: It’s easy to get up and running quickly; sites like openprocessing.org and the main p5js website have editors with built-in support and syntax highlighting.
- Hides complexity: Simplifies many drawing operations that would otherwise be trickier to master.
Cons of p5js
- Hides complexity! Sometimes simplifying isn’t necessary, and knowing the functions that p5js relies on under the hood gives you more control.
- Size: By any standards, it’s a large library (minified and without the add-ons, the core clocks in at nearly 800kb).
- Some bad practices: the use of global variables, for instance, isn’t a good programming practice.
- Compatibility: due to said global variables, it doesn’t play well with other libraries.
- Prototyping: While it might be good for prototyping, it would be an inefficient for inclusion in a web application.
Pros of HTML Canvas
- Deeper understanding: it’s often better (if not necessarily more convenient) to know how things work under the hood if you’re really interested in a technology.
- Power: I don’t mean this in the ‘mmmwhahahaha’ sense of the word (well, maybe I do a bit) but once you know the Canvas API, you have a powerful and efficient set of tools at your disposal for any web project.
- Future-proof: although p5js doesn’t show signs of going away any time soon, libraries do come and go. The HTML Canvas however is a W3C web standard, which is about as future-proof as things can get in the fast-paced world of the web.
- Documentation: being a web standard, Canvas doesn’t come up short in the documentation department, the Mozilla site offering the most comprehensive resources.
- Satisfaction: this might be a more subjective reason, but you can’t deny that it is often more satisfying to program something without the use of libraries.
Cons of HTML Canvas
- Difficulty: its steeper learning curve means it’s not quite as beginner-friendly.
- Verbosity: Sometimes it can be a little long-winded compared to p5js for the same visual result (but the same could be said versus any library).
- Less focused resources: while there are certainly lots of videos, books and tutorials, there’s less of a roadmap if your interest is creative coding specifically.
- Pixi.js: a small and fast library with a very efficient rendering engine.
- Easel.js: part of the CreateJS suite, it was designed to make it easier to work with the HTML Canvas, while also keeping things performant.