# How do I dictate where my link is located in the canvas?
**URL:** https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352
**Category:** Coding Questions
**Created:** [November 9, 2019, 3:34pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352 "2019-11-09T15:34:24Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)
#### Post date: [November 9, 2019, 3:34pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/1 "2019-11-09T15:34:24Z")
Hi all,
I would like to have a clickable link in my canvas. However the help page for [createA](https://p5js.org/reference/#/p5/createA) doesn’t let you know how to draw it at, say, (200, 400) on the canvas. How do I do this? I tried translate, but it doesn’t work.
```auto
function setup() {
createCanvas(windowWidth, windowHeight);
createA('http://p5js.org/', 'this is a link');
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 9, 2019, 3:40pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/2 "2019-11-09T15:40:37Z")
```auto
let link;
function setup() {
createCanvas(400, 400);
link = createA('http://p5js.org/', 'this is a link','_blank');
link.position(10,20);
}
function draw() {
background(220);
}
```
works to move the dom element over the canvas and not below
* * *
if you have HTML elements above the canvas the position thing gets tricky but still possible.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [November 9, 2019, 3:47pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/3 "2019-11-09T15:47:10Z")
https://codepen.io/GoSubRoutine/embed/preview/KNbwLW?height=300&slug-hash=KNbwLW&default-tabs=js,result&host=https://codepen.io
---
### Author:  [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)
#### Post date: [November 9, 2019, 3:49pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/4 "2019-11-09T15:49:29Z")
Lovely! Thank you kll 🙂 Do you know where I would find this in a reference page (other dot options for dom elements)? For example, I’d like to know how to change the text’s colour, size and font as well.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [November 9, 2019, 3:50pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/5 "2019-11-09T15:50:11Z")
[p5js.org/reference/#/p5.Element](http://p5js.org/reference/#/p5.Element)
[p5js.org/reference/#/p5.Element/elt](http://p5js.org/reference/#/p5.Element/elt)
> **[Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)**
>
> When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 9, 2019, 3:51pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/6 "2019-11-09T15:51:11Z")
[https://p5js.org/reference/#/p5.Element/style](https://p5js.org/reference/#/p5.Element/style)
---
### Author:  [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)
#### Post date: [November 9, 2019, 3:59pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/7 "2019-11-09T15:59:24Z")
Excellent! It doesn’t show how to change the font though. I took some guesses:
```auto
link.style('font', 'helvetica');
link.style('font-type', 'helvetica');
```
but neither worked. When the p5 reference page isn’t complete, is there somewhere else I can go to find the rest?
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [November 9, 2019, 7:27pm UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/8 "2019-11-09T19:27:27Z")
If you have access to the stylesheet it might be easier to use that for styling. If the link is inside the canvas, you could probably target it like this:
```auto
// css
#canvas_id_name a {
font-family: your_font;
font-size: 1.4rem;
color:#4d76d4;
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 10, 2019, 1:42am UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/9 "2019-11-10T01:42:14Z")
to get in HTML
see: inspector
```auto
test
```
you need in processing
```auto
let atext = "test";
let div;
function setup() {
createCanvas(400, 400);
div = createDiv(atext);
div.position(100,100);
div.style('font-family','verdana');
div.style('font-size',100+'px');
}
function draw() {
background(220);
}
```
* * *
where you find info?
[https://www.w3schools.com/html/html\_styles.asp](https://www.w3schools.com/html/html_styles.asp)
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [November 12, 2019, 12:48am UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352/10 "2019-11-12T00:48:27Z")
> [@SheCurvesMobius](#):
>
> When the p5 reference page isn’t complete, is there somewhere else I can go to find the rest?
The key concept there is that p5.dom is manipulating the DOM, so a lot of the documentation for what you can do is in the HTML and CSS3 spec, as @kll linked to w3schools – you are rewriting objects according to those specs in a way that creates html elements just as if they had originally been part of the page, so anything that would be valid CSS3 will be a valid style argument to attach to one of those elements – the p5.DOM library doesn’t inspect the tokens or contain any special logic for rendering them, JavaScript just passes them on to the browser. ‘font-family’ is one of the things that you can pass – but there are probably over 200 others. [https://www.w3schools.com/cssref/](https://www.w3schools.com/cssref/)