# P5.js not working in blogger

**URL:** <https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086>\
**Category:** Beginners\
**Created:** [September 4, 2021, 7:19am UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086 "2021-09-04T07:19:16Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 4, 2021, 7:19am UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/1 "2021-09-04T07:19:16Z")

</div>

Hi,  
Does p5.js work on [blogger.com](http://blogger.com) platform? It is not working for me. Tried with simple p5.js with canvas and included the cdn link but does not work. Has anyone tried p5.js on blogger?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 4, 2021, 10:44am UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/2 "2021-09-04T10:44:02Z")

</div>

Hi @processing_user,

What do you mean by “It is not working for me” ? Do you have any error messages in the web console? Is the script really executed?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [September 4, 2021, 10:53am UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/3 "2021-09-04T10:53:04Z")

</div>

I think the easiest way is to embed the sketch to your page as an iframe. For example, if you are on p5.js web editor, select share and there is an HTML code for embed that you can directly paste into your blog page (HTML view)

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 4, 2021, 12:49pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/4 "2021-09-04T12:49:52Z")

</div>

> [@micuat](#):
>
> p5.js web editor

thanks, iframe works but still how can i do it without iframe?

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 4, 2021, 12:52pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/5 "2021-09-04T12:52:23Z")

</div>

in blogger platform we just paste the html code and javascript in page or blog. with other js with html/css it works perfectly but with p5.js the same thing does not work

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 4, 2021, 3:38pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/6 "2021-09-04T15:38:49Z")

</div>

All right can you tell us what is not working?  
Can you verify if the CDN link is working?  
Are the script tags correctly ordered? (See [this](https://stackoverflow.com/a/1323230))  
Are there any errors in your JS code? (Press F12 to open the developer console and paste any errors here)

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 4, 2021, 4:05pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/7 "2021-09-04T16:05:06Z")

</div>

hi, the following is the code on single html page:

```auto
<html>
<head>
  <style>   
  canvas {
    outline: black 3px solid;
  border-radius: 12px;
}
    </style>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
</head>

<body>
  <script>
  function setup() {
createCanvas(480, 120);
}

function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(155);
}
ellipse(mouseX, mouseY, 60, 60);
}
  </script>
</body>
</html>

```

the cdn link is working.  
below is picture of blog page in [blogger.com](http://blogger.com)(free blog platform):

 ![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/636f41bbb92c1c3193d4f60504ed5cf5b1d84107.jpeg)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 4, 2021, 4:23pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/8 "2021-09-04T16:23:36Z")

</div>

Thank you for that, it looks fine.

Can you do the following when you are on your blog’s page?

> [@josephh](#):
>
> (Press F12 to open the developer console and paste any errors here)

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 4, 2021, 4:47pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/9 "2021-09-04T16:47:37Z")

</div>

hi, no errors can be seen:

 ![2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/528a017435b94fd1c5d8e3b63bbd303eed0311ac.jpeg)

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 4, 2021, 4:48pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/10 "2021-09-04T16:48:32Z")

</div>

the blog shows only rectangle:

 ![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e7e17f3f3500c7c80a77efe077c809f4efb71295.jpeg)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [September 5, 2021, 9:46am UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/11 "2021-09-05T09:46:57Z")

</div>

this worked for me

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

<div id="p5canvas"></div>

<script>
  function setup() {
createCanvas(480, 120).parent("p5canvas");
}

function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(155);
}
ellipse(mouseX, mouseY, 60, 60);
}
</script>

```

the problem is the editor on blogger is not the entire html page, but a portion of the page that renders the content. So you cannot add tags like `<html>` and `<body>`. The other issue is that if you don’t select `parent()` of the canvas, it will appear at the bottom of the page. You need to place `<div>` where you want to show your canvas, and attach the canvas to that div.

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 5, 2021, 4:56pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/12 "2021-09-05T16:56:36Z")

</div>

awsome, 👍 tested and good to go, many thanks

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [September 5, 2021, 5:31pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086/13 "2021-09-05T17:31:02Z")

</div>

you’re welcome! I don’t earn any points by this but if you could set the post above as “solution” it might help people visiting here in the future 🙂