# Using PShapes as a canvas for images

**URL:** https://discourse.processing.org/t/using-pshapes-as-a-canvas-for-images/12529
**Category:** Project Guidance
**Created:** [July 5, 2019, 4:28pm UTC](https://discourse.processing.org/t/using-pshapes-as-a-canvas-for-images/12529 "2019-07-05T16:28:34Z")
**Posts on this page:** 1
**Showing post:** 8

<div class="post-metadata">

### Author: ![xce](https://avatars.discourse-cdn.com/v4/letter/x/e9c0ed/32.png) [@xce](https://discourse.processing.org/u/xce)
#### Post date: [July 8, 2019, 4:55pm UTC](https://discourse.processing.org/t/using-pshapes-as-a-canvas-for-images/12529/8 "2019-07-08T16:55:31Z")

</div>

```auto
PImage tex;
PImage tex2;

PGraphics pg;

PImage img = createImage(50, 50, RGB);
PImage img2 = createImage(50, 50, RGB);

int psX, psY = 200;

float rotx, roty, rotz;
float size;

void setup() 
{
  size(600, 600, P3D);
  textureMode(NORMAL);

  pg = createGraphics(200, 200);
}

void draw() 
{
  background(128);
  noStroke();

  //rotx += TAU/500;
  //roty += TAU/500;

  pg.beginDraw();
  pg.pushMatrix();
  pg.translate(100, 100);
  pg.pushMatrix();
  pg.rotate(radians(mouseX));
  pg.translate(-100, -100);

  pg.strokeWeight(5);
  pg.stroke(0);
  pg.fill(255, 255, 0);
  pg.circle(100, 100, 190);
  pg.rectMode(CENTER);
  pg.fill(0, 255, 0);
  pg.rect(100, 100, 50, 50);

  pg.popMatrix(); 
  pg.popMatrix();

  pg.pushMatrix();
  pg.translate(psX, psY);
  pg.pushMatrix();
  pg.rotate(rotx*2);
  pg.translate(-100, -100);

  pg.strokeWeight(5);
  pg.stroke(0);
  pg.fill(0, 255, 255);
  pg.circle(100, 100, 190);
  pg.rectMode(CENTER);
  pg.fill(255, 0, 0);
  pg.rect(100, 100, 50, 50);

  pg.popMatrix(); 
  pg.popMatrix();

  pg.endDraw();

  //img = get(0, 0, 200, 200);

  //image(pg, 400, 400); 

  pushMatrix();
  translate(width/2.0, height/2.0, -500);
  //rotateX(radians(mouseX));
  //rotateY(radians(mouseY));
  size = 100;
  noStroke();
  TexturedCube(img);
  popMatrix();
}

void keyPressed()
{
  if (keyCode == UP)
  {
    psY--;
  }

  if (keyCode == DOWN)
  {
    psY++;
  }

  if (keyCode == LEFT)
  {
    psX--;
  }

  if (keyCode == RIGHT)
  {
    psX++;
  }
}

void TexturedCube(PImage tex) 
{
  beginShape(QUADS);
  texture(pg); 
  // +Z "front" face
  vertex(-size, -size, size, 0, 0);
  vertex( size, -size, size, 1, 0);
  vertex( size, size, size, 1, 1);
  vertex(-size, size, size, 0, 1);
  endShape();

  beginShape(QUADS);
  texture(pg);
  // +Y "bottom" face
  vertex(-size, size, size, 0, 0);
  vertex( size, size, size, 1, 0);
  vertex( size, size, -size, 1, 1);
  vertex(-size, size, -size, 0, 1);
  endShape();

  beginShape(QUADS);
  texture(pg);
  // fill(255, 255, 0);
  // +X "right" face
  vertex( size, -size, size, 0, 0);
  vertex( size, -size, -size, 1, 0);
  vertex( size, size, -size, 1, 1);
  vertex( size, size, size, 0, 1);
  endShape();
}

```

… I figured it out… I missed the endDraw. This was causing the problem. Edited to fix.

---

_[View the full topic](https://discourse.processing.org/t/using-pshapes-as-a-canvas-for-images/12529)._