# Can p5 objects have anchor links?

**URL:** <https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658>\
**Category:** Coding Questions\
**Created:** [November 10, 2022, 2:25pm UTC](https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658 "2022-11-10T14:25:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![elle\_C](https://avatars.discourse-cdn.com/v4/letter/e/ee7513/32.png) [@elle\_C](https://discourse.processing.org/u/elle_C)\
**Post date:** [November 10, 2022, 2:25pm UTC](https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658/1 "2022-11-10T14:25:56Z")

</div>

Hello, I’m new to p5 DOM manipulation and I’m trying to discover if it’s possible to associate an object with a link. For example I would like to draw a circle and when it is clicked I go to a link.

I have experimented with instance mode and seen how I can link an entire canvas to a html anchor link, this is nice to make individual ‘buttons’ however now I want to know if I can have just one canvas with associated buttons e.g. an arrangement of circles where each circle is a different link.

Thanks in advance for an help!

---

<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 10, 2022, 11:00pm UTC](https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658/2 "2022-11-10T23:00:34Z")

</div>

Hi @elle_C,

Welcome to the forum! 😉

A simple solution might be to do that in pure JavaScript using the [`window.location`](https://stackoverflow.com/questions/1226714/how-to-get-the-browser-to-navigate-to-url-in-javascript) object and simulating a link hovering effect:

```javascript
class LinkCircle {
  constructor(x, y, diameter, url) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.url = url;
  }
  
  isMouseInside() {
    return dist(this.x, this.y, mouseX, mouseY) < this.diameter / 2.0;
  }
  
  mousePressed() {
    if (this.isMouseInside()) {
      window.location.assign(this.url);
    }
  }
  
  display() {
    const mouseInside = this.isMouseInside();
    
    // Simulate link hover by changing cursor type
    cursor(mouseInside ? HAND : ARROW);
    
    fill(mouseInside ? 255 : 0);
    circle(this.x, this.y, this.diameter);
  }
}

let linkCircle;

function setup() {
  createCanvas(400, 400);
  
  linkCircle = new LinkCircle(
    width / 2, height / 2, 250,
    "https://processing.org"
  );
}

function draw() {
  background(220);
  
  linkCircle.display();
}

function mousePressed() {
  linkCircle.mousePressed();
}

```

![ezgif-3-9b15eb7e9f](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/9/89db31659c1b3f11df349c1812cb842197e44942.gif)

Otherwise, since p5js uses the native HTML `<canvas>` element to draw things it’s not really possible to use HTML links with canvas shapes.

You might want to use SVG instead or CSS: [The Many Ways to Link Up Shapes and Images with HTML and CSS | CSS-Tricks - CSS-Tricks](https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/)

---

<div class="post-metadata">

**Author:** ![elle\_C](https://avatars.discourse-cdn.com/v4/letter/e/ee7513/32.png) [@elle\_C](https://discourse.processing.org/u/elle_C)\
**Post date:** [November 11, 2022, 4:55pm UTC](https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658/3 "2022-11-11T16:55:17Z")

</div>

Hi @josephh,

Thank you so much for your great insight! As a beginner it really helps to know the different options there are.

I like the idea of the javascript/class option as it will give me alot of freedom to make and arrange my visual links - I’m going to give it a try 🙂

---

<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 11, 2022, 6:22pm UTC](https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658/4 "2022-11-11T18:22:15Z")

</div>

Gad it helped! A good option might be to use class [inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#inheritance) to implement any kind of shapes you want with a specific click bounding box. 😉