Attempt at p5.js on my Website

2025-10-19

I think it's cool I can have a simple graphics canvas on my website. I'm using p5.js because it's simple and I'm familiar with it, having used it in high school.

Using an HTML iframe

An HTML iframe is a way to display a web page within a web page. The following HTML line is going to display my p5.js sketch from the online editor.

<iframe src="https://editor.p5js.org/CJSatnarine/sketches/DHA_3rPSq" width="800px" height="800px"></iframe>

However, I don't like this. It shows the code, the entire editor, and you can click my username to see the scripts I wrote when I was still in highschool. Horrifying. I just want to display the canvas.

Attempt at using an HTML canvas

I looked into the HMTL file of the p5,js editor and saw that they had a script HTML element that pulled the p5.js library into the project, so I just copied that and pasted it into my header section of my HTML file:

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>

And then had a simple test JavaScript file with p5.js code on it:

function setup() {
  let canvas = createCanvas(800, 800);
  canvas.parent('p5'); 
}

function draw() {
  background(225);
  ellipse(mouseX, mouseY, 50, 50);
}

And added this canvas with the ID p5 to my webpage:

<canvas id="p5"/>

However, the canvas didn't show up and I got these errors in the developer's console on my browser:

What did this even mean? I have no clue. I was so lost with this for hours. I'll return to trying to put p5.js on my website at a later time.