How do I dictate where my link is located in the canvas?

p5.js Coding Questions
1

Hi all,
I would like to have a clickable link in my canvas. However the help page for 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.

function setup() {
	createCanvas(windowWidth, windowHeight);
	createA('http://p5js.org/', 'this is a link');
}
1 Like
2 
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.

1 Like
3

1 Like
4

Lovely! Thank you kll :slight_smile: 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.

1 Like
5

p5js.org/reference/#/p5.Element
p5js.org/reference/#/p5.Element/elt

1 Like
6

https://p5js.org/reference/#/p5.Element/style

1 Like
7

Excellent! It doesn’t show how to change the font though. I took some guesses:

	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?

8

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:

// css
#canvas_id_name a {
  font-family: your_font;
  font-size: 1.4rem;
  color:#4d76d4;
}
1 Like
9

to get in HTML
see: inspector

<div style="position: absolute; left: 100px; top: 100px; 
font-family: verdana; 
font-size: 100px;">test</div>

you need in processing

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);
}

dom_div_font
dom_div_font1261×958 35.7 KB

where you find info?
https://www.w3schools.com/html/html_styles.asp

1 Like
10

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/

1 Like