# P5 makes me crazy！

**URL:** <https://discourse.processing.org/t/p5-makes-me-crazy/27907>\
**Category:** Beginners\
**Created:** [February 18, 2021, 2:27pm UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907 "2021-02-18T14:27:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [February 18, 2021, 2:27pm UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/1 "2021-02-18T14:27:23Z")

</div>

```auto

let planeImage
var easycam;
let eyex=200, eyey=100, eyez=200;
let cx=100, cy=10, cz=100;
let angle = 339;
let dx = 1.0, dy=1.0, dz = 1.0;
let pg =[];
let tv;

let p1, p2, p3, p4, p55, p6, p7, p8;
let d1, d2, d3, d4, d5, d6, d7, d8;
let shortWall, wall, wallN, wallS, s;
function preload() {
  planeImage = loadImage('data/plane.jpg');
  wall = loadImage ("data/sheet.jpg");
  p1 = loadImage ("data/sheet.jpg");
  p2 = loadImage ("data/sheet.jpg");
  p3 = loadImage ("data/sheet.jpg");
  p4 = loadImage ("data/sheet.jpg");
  p55 = loadImage ("data/sheet.jpg");
  p6 = loadImage ("data/sheet.jpg");

  s = loadImage ("data/sheet.jpg");
  tv = createVideo('data/splick.mp4');
  tv.loop();
 //tv.volume(50);
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes('antialias', true);
  //easycam = createEasyCam();
 textureMode(NORMAL);

  perspective(1.15, float(width)/float(height), 10., 40000.);
  pg[0] = createGraphics(1920, 1080, WEBGL);
  keyPressed();
}
// function windowResized() {
// resizeCanvas(windowWidth, windowHeight);
// easycam.setViewport([0,0,windowWidth, windowHeight]);
// }
function keyPressed ()
{
// console.log(keyCode);

// Motion keys - avatar moves, viewpoint changes.

  if (angle<0) angle = angle + 360.0;
   else if (angle > 360.0) angle = angle - 360.0;
  dx = bigcos(angle);
  cx = dx*20000.0;
  dz = bigsin(angle);
  cz = dz*20000.0;
//console.log(eyex,eyey,eyez,angle,dx,dz);

   if (eyey < 20) eyey = 20.0; // Enforce depth rules.
    else if (eyey > 500.0) eyey = 500.0;
  if (eyex < 0) eyex = 1;
  if (eyex > 1000) eyex = 999;
  if (eyez < 0) eyez = 0;
  if (eyez > 1000) eyez = 1000;
}
function draw() {
// dx = mouseX;
//dy = mouseY;
  background(0);
  pg[0].background(0);

  pg[0].push();
  pg[0].rotateZ(PI);
  pg[0].translate(-pg[0].width / 2, -pg[0].height / 2,0);
//D
    pg[0].image(tv,0,0);

    pg[0].ellipse(150, 75, 60, 60);//Error in this place！！！ :sob:
//
// pg[0].strokeWeight(4);
  pg[0].pop();

  //pg[0].rect(pg[0].width / 2, pg[0].height / 2, 50, 50);
  push()
  translate(100,100,10);

  image(pg[0],0,0,192,108);
  pop();
  if (keyIsPressed === true) {

    if (keyCode == UP_ARROW) // Move 'forward'
    {
      eyex += 2*dx; eyez += 2*dz;
    } else if (keyCode == DOWN_ARROW) // Move 'backward
    {
      eyex -= 1*dx; eyez -= 2*dz;

    }
     if (keyCode == LEFT_ARROW) // Turn left a unit (CCW)
    {
      angle = angle + 1.0;
    } else if (keyCode == RIGHT_ARROW) // Turn right a unit (CW)
      angle = angle - 1.0;

   if (key == 'w') eyey = eyey + 10; // UP
    if (key == 's') eyey = eyey - 10; // DOWN

      if (angle<0) angle = angle + 360.0;
       else if (angle > 360.0) angle = angle - 360.0;
      dx = bigcos(angle);
      cx = dx*20000.0;
      dz = bigsin(angle);
      cz = dz*20000.0;
    //console.log(eyex,eyey,eyez,angle,dx,dz);

       if (eyey < 20) eyey = 20.0; // Enforce depth rules.
        else if (eyey > 500.0) eyey = 500.0;
      if (eyex < 0) eyex = 1;
      if (eyex > 1000) eyex = 999;
      if (eyez < 0) eyez = 0;
      if (eyez > 1000) eyez = 1000;

  }
  camera(eyex, eyey, eyez, cx, cy, cz, 0, -1, 0);
noStroke();
  ambientLight(255);
  prism (0, 0, 0, 1000, 500, 1000, p6, p1, p2, p3, s);
   drawWall1();
   drawWall2();
  normalMaterial();

// push();
// translate(0, 0, 0);
// // rotateZ(frameCount * 0.01);
// rotateX(PI/2);
// //rotateY(frameCount * 0.01);
// texture(planeImage);
// plane(300);
// pop();
//
//
// // normalMaterial();
// fill(255);
// push();
// translate(0, -150, 150);
// // rotateZ(frameCount * 0.01);
// // rotateX(PI/2);
// //rotateY(frameCount * 0.01);
// //texture(planeImage);
// fill(230);
// plane(300);
// pop();
//
// push();
// translate(0, -150, -150);
// // rotateZ(frameCount * 0.01);
// // rotateX(PI/2);
// //rotateY(frameCount * 0.01);
// //texture(planeImage);
// fill(230);
// plane(300);
// pop();
//
// push();
// translate(150, -150, 0);
// // rotateZ(frameCount * 0.01);
// rotateY(PI/2);
// //rotateY(frameCount * 0.01);
// //texture(planeImage);
// fill(230);
// plane(300);
// pop();
// push();
// translate(-150, -150, 0);
// // rotateZ(frameCount * 0.01);
// rotateY(PI/2);
// //rotateY(frameCount * 0.01);
// //texture(planeImage);
// fill(230);
// plane(300);
// pop();
}
function drawWall1()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p4 != null) texture(p4);
    vertex (200, 0, 500, 0, 1);
    vertex (800, 0, 500, 1, 1);
    vertex (800, 300, 500, 1, 0);
    vertex (200, 300, 500, 0, 0);
   endShape();
   pop();
}

function drawWall2()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p5 != null) texture(p55);
    vertex (200, 0, 501, 0, 1);
    vertex (800, 0, 501, 1, 1);
    vertex (800, 300, 501, 1, 0);
    vertex (200, 300, 501, 0, 0);
   endShape();
   pop();
}

function prism (x,y,z,dx,dy,dz,north,south,east,west,top)
{
  push();
  translate (x, y, z);
// North
   beginShape();
    if (north != null) texture(north);
    vertex ( 0, 0, dz, 0, 1);
    vertex (dx, 0, dz, 1, 1);
    vertex (dx, dy, dz, 1, 0);
    vertex ( 0, dy, dz, 0, 0);
   endShape();

// South

   beginShape();
    if (south != null) texture(south);
    vertex ( 0, 0, 0, 0, 1);
    vertex (dx, 0, 0, 1, 1);
    vertex (dx, dy, 0, 1, 0);
    vertex ( 0, dy, 0, 0, 0);
   endShape();

// East

   beginShape();
   if (east != null) texture(east);
   vertex (dx, 0, 0, 0, 1);
   vertex (dx, 0, dz, 1, 1);
   vertex (dx, dy, dz, 1, 0);
   vertex (dx, dy, 0, 0, 0);
   endShape();

// West

   beginShape();
   if (west != null) texture(west);
   vertex (0, 0, 0, 0, 1);
   vertex (0, 0, dz, 1, 1);
   vertex (0, dy, dz, 1, 0);
   vertex (0, dy, 0, 0, 0);
   endShape();

// Top

   beginShape();
   if (top != null) texture(top);
   else fill (160, 82, 45); // Sienna
   vertex ( 0, dy, 0, 0, 0);
   vertex (dx, dy, 0, 1, 0);
   vertex (dx, dy, dz, 1, 1);
   vertex ( 0, dy, dz, 0, 1);
   endShape();

 // Bottom

   beginShape();
    if (planeImage != null) texture(planeImage);
   vertex ( 0, 0, 0, 0, 0);
   vertex (dx, 0, 0, 1, 0);
   vertex (dx, 0, dz, 1, 1);
   vertex ( 0, 0, dz, 0, 1);
   endShape();
  translate (-x, -y, -z);
  pop();
}

function bigsin (s)
{
 if (s > 360.0) s = s - 360.0;
 else if (s < 0.0) s = s + 360.0;

 if (s <= 90.0) return sin (s*DEG_TO_RAD);
 else if (s<=180.0) return sin ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -sin((s-180.0)*DEG_TO_RAD);
 else return -sin((360.0-s)*DEG_TO_RAD);
}

function bigcos (s)
{
   if (s> 360.0) s = s - 360.0;
 else if (s<0.0) s = s+ 360.0;

  if (s <= 90.0) return cos (s*DEG_TO_RAD);
 else if (s<=180.0) return -cos ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -cos((s-180.0)*DEG_TO_RAD);
 else return cos((360.0-s)*DEG_TO_RAD);

}

```

Hi guys!There is an error that can’t be solved！Who can help me!

p5.js:55792 Uncaught TypeError: Cannot read property ‘grid’ of undefined  
at \_main.default.Graphics.\_main.default.\_renderEllipse (p5.js:55792)  
at \_main.default.Graphics.\_main.default.ellipse (p5.js:55732)  
at draw (sketch.js:81)  
at p5.\_main.default.redraw (p5.js:58911)  
at \_draw (p5.js:51424)

---

<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:** [February 18, 2021, 6:18pm UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/2 "2021-02-18T18:18:15Z")

</div>

Hi,

So this error is a little bit strange, let’s do some reverse engineering by checking the call stack (from the [source code](https://github.com/processing/p5.js)):

```auto
// sketch.js

pg[0].ellipse(150, 75, 60, 60);

```

* * *

```auto
// p5.js/core/shape/2d_pimitives.js

p5.prototype.ellipse = function(x, y, w, h, detailX) {
  p5._validateParameters('ellipse', arguments);
  return this._renderEllipse.apply(this, arguments);
};

```

* * *

## The error is here :

```auto
// p5.js/src/core/shape/2d_pimitives.js

// internal method for drawing ellipses (without parameter validation)
p5.prototype._renderEllipse = function(x, y, w, h, detailX) {
  // ...

  //accessible Outputs
  if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
    this._accsOutput('ellipse', [vals.x, vals.y, vals.w, vals.h]);
  }

  // ...
};

```

So it’s trying to access the `grid` property of the `_accessibleOutputs` object which is supposed to be defined here :

```auto
// p5.js/src/core/main.js

class p5 {
  _initializeInstanceVariables() {
    this._accessibleOutputs = {
      text: false,
      grid: false,
      textLabel: false,
      gridLabel: false
    };

    // ...
  }
}

```

Now we know where the issue comes from, however this simple example works :

```auto
const pg = [];

function setup() {
  createCanvas(400, 400);
  
  pg[0] = createGraphics(width, height, WEBGL);
}

function draw() {
  background(220);
  
  pg[0].ellipse(0, 0, 50, 50);
  
  image(pg[0], 0, 0);
}

```

Is the error always there each time you run the sketch?

Anyway few points to improve your code :

- Instead of saying `pg[0]` each time, declare a variable and use it later :

- If you run your code on the p5 web editor, go to `Edit -> Tidy Code` to auto format your code because you have indentation issues (spaces at the beginning of each line). If you use the Processing editor you can press `Ctrl+T` to format it.

- When posting on the forum, please remove any code that you commented in your code specially big blocks because we don’t need them. Also if you use images, we can’t really test your code that’s why it’s better to simplify the issue by providing a smaller code.

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [February 19, 2021, 1:49am UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/3 "2021-02-19T01:49:44Z")

</div>

> [@josephh](#):
>
> `const buffer = pg[0];`

Thank you very much for your reply. The tool I use is Atom.  
According to your method, I have declared a variable to use it, but there is still this error, and it affects the operation of my entire program.  
I use an array because I will use multiple Canvas later, even if I don’t use an array, it still cannot run.  
Regarding the code, I’m sorry, I have simplified the code and posted it so that you can debug it easily. I can also run simple examples.

```auto

let planeImage
let eyex=200, eyey=100, eyez=200;
let cx=100, cy=10, cz=100;
let angle = 339;
let dx = 1.0, dy=1.0, dz = 1.0;
let pg =[];
let tv;

let p1, p2, p3, p4, p55, p6, p7, p8;
let d1, d2, d3, d4, d5, d6, d7, d8;
let shortWall, wall, wallN, wallS, s;
function preload() {
  planeImage = loadImage('data/plane.jpg');
  wall = loadImage ("data/sheet.jpg");
  p1 = loadImage ("data/sheet.jpg");
  p2 = loadImage ("data/sheet.jpg");
  p3 = loadImage ("data/sheet.jpg");
  p4 = loadImage ("data/sheet.jpg");
  p55 = loadImage ("data/sheet.jpg");
  p6 = loadImage ("data/sheet.jpg");

  s = loadImage ("data/sheet.jpg");
  tv = createVideo('data/splick.mp4');
  tv.loop();

}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes('antialias', true);

 textureMode(NORMAL);

  perspective(1.15, float(width)/float(height), 10., 40000.);
  buffer = createGraphics(1920, 1080, WEBGL);

  keyPressed();

}

function keyPressed ()
{
// console.log(keyCode);

// Motion keys - avatar moves, viewpoint changes.
  const buffer = pg[0];
  if (angle<0) angle = angle + 360.0;
   else if (angle > 360.0) angle = angle - 360.0;
  dx = bigcos(angle);
  cx = dx*20000.0;
  dz = bigsin(angle);
  cz = dz*20000.0;
//console.log(eyex,eyey,eyez,angle,dx,dz);
   if (eyey < 20) eyey = 20.0; // Enforce depth rules.
    else if (eyey > 500.0) eyey = 500.0;
  if (eyex < 0) eyex = 1;
  if (eyex > 1000) eyex = 999;
  if (eyez < 0) eyez = 0;
  if (eyez > 1000) eyez = 1000;
}
function draw() {
// dx = mouseX;
//dy = mouseY;
  background(0);
  buffer.background(0);
  buffer.push();
  buffer.rotateZ(PI);
  buffer.translate(-buffer.width / 2, -buffer.height / 2,0);
  buffer.image(tv,0,0);
  buffer.ellipse(150, 75, 60, 60);//Still wrong
// pg[0].strokeWeight(4);
  buffer.pop();

  //pg[0].rect(pg[0].width / 2, pg[0].height / 2, 50, 50);
  push()
  translate(100,100,10);
  image(buffer,0,0,192,108);
  pop();

  if (keyIsPressed === true) {

    if (keyCode == UP_ARROW) // Move 'forward'
    {
      eyex += 2*dx; eyez += 2*dz;
    } else if (keyCode == DOWN_ARROW) // Move 'backward
    {
      eyex -= 1*dx; eyez -= 2*dz;

    }
     if (keyCode == LEFT_ARROW) // Turn left a unit (CCW)
    {
      angle = angle + 1.0;
    } else if (keyCode == RIGHT_ARROW) // Turn right a unit (CW)
      angle = angle - 1.0;

   if (key == 'w') eyey = eyey + 10; // UP
    if (key == 's') eyey = eyey - 10; // DOWN

      if (angle<0) angle = angle + 360.0;
       else if (angle > 360.0) angle = angle - 360.0;
      dx = bigcos(angle);
      cx = dx*20000.0;
      dz = bigsin(angle);
      cz = dz*20000.0;
    //console.log(eyex,eyey,eyez,angle,dx,dz);

       if (eyey < 20) eyey = 20.0; // Enforce depth rules.
        else if (eyey > 500.0) eyey = 500.0;
      if (eyex < 0) eyex = 1;
      if (eyex > 1000) eyex = 999;
      if (eyez < 0) eyez = 0;
      if (eyez > 1000) eyez = 1000;

  }
  camera(eyex, eyey, eyez, cx, cy, cz, 0, -1, 0);
  noStroke();
  ambientLight(255);
  prism (0, 0, 0, 1000, 500, 1000, p6, p1, p2, p3, s);
  drawWall1();
  drawWall2();
  normalMaterial();
}
function drawWall1()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p4 != null) texture(p4);
    vertex (200, 0, 500, 0, 1);
    vertex (800, 0, 500, 1, 1);
    vertex (800, 300, 500, 1, 0);
    vertex (200, 300, 500, 0, 0);
   endShape();
   pop();
}

function drawWall2()
{
     push();
// North wall
   translate (0, 0, dz);

   beginShape();
    if (p5 != null) texture(p55);
    vertex (200, 0, 501, 0, 1);
    vertex (800, 0, 501, 1, 1);
    vertex (800, 300, 501, 1, 0);
    vertex (200, 300, 501, 0, 0);
   endShape();
   pop();
}

function prism (x,y,z,dx,dy,dz,north,south,east,west,top)
{
  push();
  translate (x, y, z);
// North
   beginShape();
    if (north != null) texture(north);
    vertex ( 0, 0, dz, 0, 1);
    vertex (dx, 0, dz, 1, 1);
    vertex (dx, dy, dz, 1, 0);
    vertex ( 0, dy, dz, 0, 0);
   endShape();

// South

   beginShape();
    if (south != null) texture(south);
    vertex ( 0, 0, 0, 0, 1);
    vertex (dx, 0, 0, 1, 1);
    vertex (dx, dy, 0, 1, 0);
    vertex ( 0, dy, 0, 0, 0);
   endShape();

// East

   beginShape();
   if (east != null) texture(east);
   vertex (dx, 0, 0, 0, 1);
   vertex (dx, 0, dz, 1, 1);
   vertex (dx, dy, dz, 1, 0);
   vertex (dx, dy, 0, 0, 0);
   endShape();

// West

   beginShape();
   if (west != null) texture(west);
   vertex (0, 0, 0, 0, 1);
   vertex (0, 0, dz, 1, 1);
   vertex (0, dy, dz, 1, 0);
   vertex (0, dy, 0, 0, 0);
   endShape();

// Top

   beginShape();
   if (top != null) texture(top);
   else fill (160, 82, 45); // Sienna
   vertex ( 0, dy, 0, 0, 0);
   vertex (dx, dy, 0, 1, 0);
   vertex (dx, dy, dz, 1, 1);
   vertex ( 0, dy, dz, 0, 1);
   endShape();

 // Bottom

   beginShape();
    if (planeImage != null) texture(planeImage);
   vertex ( 0, 0, 0, 0, 0);
   vertex (dx, 0, 0, 1, 0);
   vertex (dx, 0, dz, 1, 1);
   vertex ( 0, 0, dz, 0, 1);
   endShape();
  translate (-x, -y, -z);
  pop();
}

function bigsin (s)
{
 if (s > 360.0) s = s - 360.0;
 else if (s < 0.0) s = s + 360.0;

 if (s <= 90.0) return sin (s*DEG_TO_RAD);
 else if (s<=180.0) return sin ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -sin((s-180.0)*DEG_TO_RAD);
 else return -sin((360.0-s)*DEG_TO_RAD);
}

function bigcos (s)
{
   if (s> 360.0) s = s - 360.0;
 else if (s<0.0) s = s+ 360.0;

  if (s <= 90.0) return cos (s*DEG_TO_RAD);
 else if (s<=180.0) return -cos ((180.0-s)*DEG_TO_RAD);
 else if (s<=270.0) return -cos((s-180.0)*DEG_TO_RAD);
 else return cos((360.0-s)*DEG_TO_RAD);

}

```

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [February 19, 2021, 2:23am UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/4 "2021-02-19T02:23:41Z")

</div>

> [@josephh](#):
>
> ```auto
> const pg = [];
> 
> function setup() {
> createCanvas(400, 400);
>   
> pg[0] = createGraphics(width, height, WEBGL);
> }
> 
> function draw() {
> background(220);
>   
> pg[0].ellipse(0, 0, 50, 50);
>   
> image(pg[0], 0, 0);
> }
> 
> ```

```auto
onst pg = [];

function setup() {
  createCanvas(400, 400, WEBGL);

  pg[0] = createGraphics(width, height,WEBGL);
}

function draw() {
  background(220);
  pg[0].background(0);
  // pg[0].translate(-width/2,-height/2)
  pg[0].ellipse(mouseX-width/2, mouseY-height/2, 50, 50);

  image(pg[0], -width/2, - height/2);
}

```

This code can run on the P5 online editor, but I can’t run it on Google Chrome with Atom

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 19, 2021, 6:56am UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/5 "2021-02-19T06:56:29Z")

</div>

> [@AbleYudada](#):
>
> This code can run on the P5 online editor, but I can’t run it on Google Chrome with Atom

> [@Web editor -- offline?](https://discourse.processing.org/t/web-editor-offline/12399/7):
>
> Most of the time, I just use a simple text editor like Notepad2 to write JS code and host them online at [OpenProcessing.org](http://OpenProcessing.org) or as a GitHub gist: For more complex stuff, like writing TS or CS code, I use the Atom IDE and host them as a GitHub repo:

> [@P5.js - not displaying static gif image](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/8):
>
> For Atom I use “atom-live-server-plus” + “tool-bar” plugins in order to get a button to open a local server on a browser for the current project folder:

> [@P5.js - not displaying static gif image](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/9):
>
> Some notes about your posted “index.html” file: You’re loading the same library 2 times: the unmodified & minimized versions. That is, “p5.js” + “p5.min.js”, “p5.gif.js” + “p5.gif.min.js”. Should pick 1 or the other: And a more serious 1: you’re loading p5.js addon libraries before the p5.js main library! Here’s their correct order for each category: \<!-- p5.js main library: --\> \<script defer src=https://cdn.JsDelivr.net/npm/p5\>\</script\> \<!-- p5.js addon libraries: --\> \<script defer src…

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [February 20, 2021, 3:40am UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/6 "2021-02-20T03:40:23Z")

</div>

Thank you for your reply, I don’t know what changed, maybe it’s the order in html, but it can run now.

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [February 23, 2021, 5:57am UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/7 "2021-02-23T05:57:51Z")

</div>

Up to now, ellippse still cannot be run under createGraphics(xx,xx,WEBGL). 😶

---

<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:** [February 23, 2021, 8:23am UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907/8 "2021-02-23T08:23:43Z")

</div>

It works fine, try to run the previous example I posted :

> [@josephh](#):
>
> ```auto
> const pg = [];
> 
> function setup() {
> createCanvas(400, 400);
>   
> pg[0] = createGraphics(width, height, WEBGL);
> }
> 
> function draw() {
> background(220);
>   
> pg[0].ellipse(0, 0, 50, 50);
>   
> image(pg[0], 0, 0);
> }
> 
> ```