# P5 pixel array to copy canvas region to Image object

**URL:** <https://discourse.processing.org/t/p5-pixel-array-to-copy-canvas-region-to-image-object/29946>\
**Category:** Coding Questions\
**Created:** [May 7, 2021, 3:33pm UTC](https://discourse.processing.org/t/p5-pixel-array-to-copy-canvas-region-to-image-object/29946 "2021-05-07T15:33:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mattobject](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mattobject](https://discourse.processing.org/u/mattobject)\
**Post date:** [May 7, 2021, 3:33pm UTC](https://discourse.processing.org/t/p5-pixel-array-to-copy-canvas-region-to-image-object/29946/1 "2021-05-07T15:33:09Z")

</div>

Working on a project that uses the webcam, lays some graphics on top of the cam image, then I need to store the cam image with the overlayed graphics in an Image object variable. Currently, my code works but the resulting image is just the upper left corner of what I need to capture.

```auto

let cam, selfy;

let showImg = false;

let margin, topMargin;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cam = createCapture(VIDEO);
  cam.hide();
  textSize(48);
  margin = 50;
  topMargin = 50;
//console.log(pixelDensity());
}

function draw() {
  background(0);
  image(cam, margin,topMargin);
  fill(255,255,0);
  text("SELFY",65,50+cam.height-15);
  fill(255,0,0);
  noStroke();
  circle(75,75,30);

  if(showImg){
    image(selfy, width/2,height/2);
  }
}

function touchEnded(){
  resizeCanvas(cam.width,cam.height);//resize the canvas to easier deal with this
  selfy = createImage(cam.width,cam.height);//same size as the cam
  selfy.loadPixels();
  let d = pixelDensity();

    loadPixels(); //load pixels of the entire canvas

   for (let x=0; x<width; x++){//x axis section of the canvas i wish to capture
      for (let y=0; y<height; y++){//y axis section of the canvas i wish to capture
        let index = x + y * (width*d) * 4; //index for the canvas pixel array
        //copy the pixels from the canvs to an Image
          selfy.pixels[index] = pixels[index];
          selfy.pixels[index+1] = pixels[index+1];
          selfy.pixels[index+2] = pixels[index+2];
          selfy.pixels[index+3] = pixels[index+3];
      }
    }

  selfy.updatePixels();
    showImg = true;
resizeCanvas(windowWidth,windowHeight);
}

```

---

<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:** [May 7, 2021, 6:03pm UTC](https://discourse.processing.org/t/p5-pixel-array-to-copy-canvas-region-to-image-object/29946/2 "2021-05-07T18:03:44Z")

</div>

Hi! Welcome to the forum!

I think the index should be

```javascript
let index = (x + y * (width*d)) * 4;

```

I suggest using `pixelDensity(1)` in `setup` to avoid complicated things. Also you can use `get(x, y, w, h)` to make it easier… in fact the copying part can be compressed to

```javascript
selfy = get(0, 0, width, height)

```

(with `get` you shouldn’t have issues with any `pixelDensity`)

---

<div class="post-metadata">

**Author:** ![mattobject](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mattobject](https://discourse.processing.org/u/mattobject)\
**Post date:** [May 7, 2021, 11:58pm UTC](https://discourse.processing.org/t/p5-pixel-array-to-copy-canvas-region-to-image-object/29946/3 "2021-05-07T23:58:09Z")

</div>

@micuat! thank you very much. I was avoiding get() because all the documentation claims it to be so much slower than working with the pixels[] array. This will work.

MO

---

<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:** [May 8, 2021, 12:14am UTC](https://discourse.processing.org/t/p5-pixel-array-to-copy-canvas-region-to-image-object/29946/4 "2021-05-08T00:14:17Z")

</div>

If you just wanna copy the contents from 1 array to the other you could simply invoke method **set()**: 💡

> **[TypedArray.prototype.set() - JavaScript | MDN](https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set)**
>
> The set() method stores multiple values in the typed
> array, reading input values from a specified array.

```auto
loadPixels();
selfy.loadPixels();
selfy.pixels.set(pixels);
selfy.updatePixels();

```

---

<div class="post-metadata">

**Author:** ![mattobject](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@mattobject](https://discourse.processing.org/u/mattobject)\
**Post date:** [May 8, 2021, 12:23am UTC](https://discourse.processing.org/t/p5-pixel-array-to-copy-canvas-region-to-image-object/29946/5 "2021-05-08T00:23:19Z")

</div>

ahh yes. this is interestingly easy as well. thank you @GoToLoop!