\
**Category:** Coding Questions\
**Created:** [September 28, 2019, 1:52am UTC](https://discourse.processing.org/t/merging-canvas-with-html-website/14250 "2019-09-28T01:52:13Z")\
**Posts on this page:** 4\
**Page:** 1
**Author:**  [@grant](https://discourse.processing.org/u/grant)\
**Post date:** [September 28, 2019, 1:52am UTC](https://discourse.processing.org/t/merging-canvas-with-html-website/14250/1 "2019-09-28T01:52:13Z")
Hello, I’m relatively new to HTML, CSS, and recently JS. I was inspired from [https://ertdfgcvb.xyz/](https://ertdfgcvb.xyz/) to create something like that website with the js animations and mouse tracking interactions/trail for my first project.
After emailing the creator, he forwarded me to p5.js. So, I started watching YouTube videos about p5.js, how to create animations within p5, and all that jazz.
So, after two days of working on this in my free time I created an interactive block of dots that spell out the name of my website, gif here ([https://gyazo.com/2f189a334fd6bf8b170c47ced48f97ef](https://gyazo.com/2f189a334fd6bf8b170c47ced48f97ef)).
Now, I want to take that animated text and place it on the top of my personal website like a header followed by all my other html content below it but, to have it all as one. Not just the canvas on the top followed by straight html on the bottom, basically the whole page being a canvas with the initial interactive header on the top followed by all my information below. Since I want to eventually add some type of interactive aspect to the paragraphs and other parts within my html.
Eventually, I would also like to add something like that mouse tracer effect shown on his website (ertdfgcvb.xyz) how would I go about doing that?
Any help is appreciated 🙂 sorry if I’m sounding confusing or confused. Mainly because I am that’s why I’m posting here in the first place lol.
---
**Author:**  [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [September 28, 2019, 11:04am UTC](https://discourse.processing.org/t/merging-canvas-with-html-website/14250/2 "2019-09-28T11:04:26Z")
Do you mean something that looks like a [fixed background effect](https://www.w3schools.com/CSSref/tryit.asp?filename=trycss_background-attachment)?
If you haven’t seen it already, this web page contains information about positioning your canvas:
> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Positioning-your-canvas)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...
---
**Author:**  [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 28, 2019, 3:57pm UTC](https://discourse.processing.org/t/merging-canvas-with-html-website/14250/3 "2019-09-28T15:57:48Z")
I’m not sure if you meant this, but these lines make sure your sketch always covers the entire page.
```auto
function setup() {
createCanvas(windowWidth, windowHeight);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
```
---
**Author:**  [@grant](https://discourse.processing.org/u/grant)\
**Post date:** [September 28, 2019, 10:56pm UTC](https://discourse.processing.org/t/merging-canvas-with-html-website/14250/4 "2019-09-28T22:56:38Z")
This helped a ton but, I found a tutorial explaining how to use absolute positioning plus the use of windowWidth, windowHight, windowResize shown in the link you gave me while also using the z-axis to put a transparent canvas in front of html content. Thanks for giving me this link though, helped a ton and led me to the tutorial.