+++
title = "Attempt at p5.js on my Website"
date = "2025-10-19"
+++
I think it's cool I can have a simple graphics canvas on my website. I'm using [p5.js](https://p5js.org/) because it's simple and I'm familiar with it, having used it in high school. 

## Using an HTML iframe
An [HTML iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/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.  

```html
<iframe src="https://editor.p5js.org/CJSatnarine/sketches/DHA_3rPSq" width="800px" height="800px"></iframe>
```
<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:
```html
<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:
```js
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:
```html
<canvas id="p5"/>
```

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

![errors!!](errors.png)

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.