# How to get 'get()' working on image created by 'createImg()'?

**URL:** <https://discourse.processing.org/t/how-to-get-get-working-on-image-created-by-createimg/39701>\
**Category:** Beginners\
**Created:** [November 14, 2022, 7:13am UTC](https://discourse.processing.org/t/how-to-get-get-working-on-image-created-by-createimg/39701 "2022-11-14T07:13:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kkouch](https://avatars.discourse-cdn.com/v4/letter/k/b5ac83/32.png) [@kkouch](https://discourse.processing.org/u/kkouch)\
**Post date:** [November 14, 2022, 7:13am UTC](https://discourse.processing.org/t/how-to-get-get-working-on-image-created-by-createimg/39701/1 "2022-11-14T07:13:59Z")

</div>

Hello. I’m currently making a program where I need to get a section of an image and save it to a given variable. The problem is that ‘[get()](https://p5js.org/reference/#/p5.Image/get)’ only works on p5.Image objects and when I try to use it on an image created by the ‘[createImg()](https://p5js.org/reference/#/p5/createImg)’ function, I get a “.get is not a function” error.

Note: the ‘copy()’ function doesn’t do the work for me. I’ve also unsuccessfully tried to make the createImg() image a child of the p5.Image class.

---

<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:** [November 14, 2022, 8:58am UTC](https://discourse.processing.org/t/how-to-get-get-working-on-image-created-by-createimg/39701/2 "2022-11-14T08:58:35Z")

</div>

Hi @kkouch,

Welcome to the forum! 😉

Is there a specific reason you are using `createImg()` instead of using [`loadImage()`](https://p5js.org/reference/#/p5/loadImage)? (Note that you can also use both)

A solution is to [draw your image into another canvas](https://stackoverflow.com/questions/12489159/how-to-display-the-content-of-img-tag-inside-a-canvas) and get a portion of it:

```javascript
function setup() {
  const canvas = createCanvas(500, 500);

  let img = createImg(
    "https://p5js.org/assets/img/asterisk-01.png",
    "the p5 magenta asterisk"
  );

  const offScreenCanvas = createGraphics(img.width, img.height);
  offScreenCanvas.drawingContext.drawImage(img.elt, 0, 0);

  const region = offScreenCanvas.get(0, 0, 50, 50);

  image(region, 0, 0);
}

function draw() {
  noLoop();
}

```

But you can also have both `loadImage` and `createImage` with the `preload()` function that will wait for the image to download (and you won’t load it twice since it’s cached):

```javascript
let img, imgDOM;
const imageURL =
  "https://images.pexels.com/photos/14139354/pexels-photo-14139354.jpeg?auto=compress&cs=tinysrgb&w=630&h=375&dpr=2";

function preload() {
  img = loadImage(imageURL);
}

function setup() {
  const canvas = createCanvas(500, 500);

  imgDOM = createImg(imageURL, "web image");

  const region = img.get(0, 0, 50, 50);
  image(region, 0, 0);
}

function draw() {
  noLoop();
}

```

(CC image from [www.pexels.com](https://www.pexels.com/photo/woman-drinking-coffee-and-eating-french-breakfast-14139354/))

---

<div class="post-metadata">

**Author:** ![kkouch](https://avatars.discourse-cdn.com/v4/letter/k/b5ac83/32.png) [@kkouch](https://discourse.processing.org/u/kkouch)\
**Post date:** [November 15, 2022, 7:10am UTC](https://discourse.processing.org/t/how-to-get-get-working-on-image-created-by-createimg/39701/3 "2022-11-15T07:10:43Z")

</div>

Thank you, I really didn’t think about using a second canvas.

> Is there a specific reason you are using `createImg()` instead of using [`loadImage()`](https://p5js.org/reference/#/p5/loadImage)?

Yes, because I’m using [createFileInput](https://p5js.org/reference/#/p5/createFileInput) to load an image from the PC.

EDIT: Turns out createFileInput works with loadImage too! Thank you a lot.