# Unable to position my object at a specific location

**URL:** <https://discourse.processing.org/t/unable-to-position-my-object-at-a-specific-location/19646>\
**Category:** Coding Questions\
**Created:** [April 10, 2020, 10:13pm UTC](https://discourse.processing.org/t/unable-to-position-my-object-at-a-specific-location/19646 "2020-04-10T22:13:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 10, 2020, 10:13pm UTC](https://discourse.processing.org/t/unable-to-position-my-object-at-a-specific-location/19646/1 "2020-04-10T22:13:21Z")

</div>

I’ve created an object myCanvas but I’m unable to position it on the main canvas. I think it just gets added to 0,0. I would like to put it at a specific location on the canvas that’s created in setup(). So maybe at 100,100 for example.

How do I create this object, myCanvas, at a specific location?

You can find the working version [here](https://editor.p5js.org/Bassam/sketches/LnGjg9eTQ)

```auto
class myCanvas {
  constructor(img, w, h) {
    this.cnv = createCanvas(w + 10, h + 10);
    this.img = img;
    this.w = w;
    this.h = h;
    background(0);
    image(this.img, 5, 5, this.w, this.h);
  }
}

```

The setup function in my sketch.js

```auto
function setup() {
  createCanvas(512, 384);
  
  //Creating myCanvas object here
  mycnv = new myCanvas(photo, 256, 192);
}

```

EDIT:  
I think what I’m trying to do is to create a p5.Element.  
Ultimately, what I want to do in my sketch is to show 2 images (which are smaller versions of their original selves). And as you hover over one, I want it to become “highlighted” with a green border (the black border that is visible originally disappears).

---

<div class="post-metadata">

**Author:** ![danielx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/danielx/32/8785_2.png) [@danielx](https://discourse.processing.org/u/danielx)\
**Post date:** [April 11, 2020, 11:00pm UTC](https://discourse.processing.org/t/unable-to-position-my-object-at-a-specific-location/19646/2 "2020-04-11T23:00:36Z")

</div>

I think you can’t have a canvas inside of a canvas, but you can have multiple canvases, take a look into Instance Mode.  
Example (creating two identical p5 elements each one with one canvas):

```auto
var sketch1 = function(s){
    s.setup = function(){
         canvas1 = s.createCanvas(...);
         ...
    };

    s.draw = function(){
    ...
    };
};

var sketch2 = /* (same process as above) */

var p5_1 = new p5(sketch1);
var p5_2 = new p5(sketch2);

```

---

<div class="post-metadata">

**Author:** ![Bassam](https://avatars.discourse-cdn.com/v4/letter/b/b38774/32.png) [@Bassam](https://discourse.processing.org/u/Bassam)\
**Post date:** [April 11, 2020, 11:02pm UTC](https://discourse.processing.org/t/unable-to-position-my-object-at-a-specific-location/19646/3 "2020-04-11T23:02:56Z")

</div>

Let me see if I can use this. Thanks.