Unable to position my object at a specific location

p5.js Coding Questions
1

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

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

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).

2 Likes
2

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):

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);
2 Likes
3

Let me see if I can use this. Thanks.