Fixed canvas

alexdontsurf

Hi! How could I put canvas position fixed? This is what i want to get: http://p5js.org/

blindfish

Do you mean you want the canvas as a background to a webpage?

The answer is to use CSS to position the canvas element generated by P5 behind the web page content. The p5 page uses an iframe; but I suspect that's so they can load random p5 sketches as backgrounds...

alexdontsurf

Nice, thank you!

GoToLoop

These are the attributes they used for the <iframe> tag there: :-B
<iframe frameborder="0" id="home-sketch-frame" src="./p5_featured/HarverMoon_Perlin" style="width: 1920px; height: 989px; position: fixed; top: 0px; left: 0px; z-index: -2; pointer-events: auto;"></iframe>

Perhaps it's that z-index attribute which places the sketch's canvas at the page's background? :-/

Funnily that is being run upon an older p5js version (0.4.5): :P
http://p5js.org/p5_featured/HarverMoon_Perlin/sketch.js

blindfish

z-index: -2 should indeed push the canvas behind any other element with a greater z-index value; but position: fixed; top: 0; left: 0; are also required so that it is stuck in position regardless of any scrolling on the page (you can adjust top/left as appropriate); otherwise it will still be positioned within the flow of the page.

Also, whilst the style attribute on the iframe may prove useful in this case it's best to right-click and 'inspect element' in the browser and then select the iframe from the rendered HTML view that's displayed. You'll then also be shown any CSS styling applied from a stylesheet rather than just inline.

If you're interested in learning CSS this approach is invaluable - see editing styles

GoToLoop

You'll then also be shown any CSS styling applied from a stylesheet rather than just inline.

I don't think that <iframe> is applying any external ".css" file.
Those extensive attributes inside the tag are all there are. ;;)

blindfish

I don't think that <iframe> is applying any external ".css" file. Those extensive attributes inside the tag are all there are.

I obviously meant in general terms :P

It's perfectly possible to apply the position to the iframe - and also override the inline styling - from within an external CSS file; so it's generally more useful to use the inspector rather than look at the html source (which only ever tells part of the story, particularly if it's the raw source).The inspector is also really useful to test CSS: once you've selected an element you can edit the rules being applied to it on the fly, hence:

If you're interested in learning CSS this approach is invaluable