Overlapping a div on top of canvas?
10,395 views
Skip to first unread message
weevil
Feb 25, 2009, 11:54:50 AM2/25/09
to Processing.js
One of the things that attracted me to processing.js as opposed to
running a java applet is the ability to place other page elements on
top of a processing sketch. However, in actual css it's tricky to
overlay a div on top of the canvas element. The only way I can
currently do it is to use 'fixed' positioning on the overlapping div,
but that pulls that element out of the page flow, so that if I have a
processing sketch that automatically centers on the page, the
overlapping div is stuck in one spot.
It should be possible to use relative positioning and container divs
to have an element on top of the canvas, but I have no idea how to do
it!
Any ideas?
running a java applet is the ability to place other page elements on
top of a processing sketch. However, in actual css it's tricky to
overlay a div on top of the canvas element. The only way I can
currently do it is to use 'fixed' positioning on the overlapping div,
but that pulls that element out of the page flow, so that if I have a
processing sketch that automatically centers on the page, the
overlapping div is stuck in one spot.
It should be possible to use relative positioning and container divs
to have an element on top of the canvas, but I have no idea how to do
it!
Any ideas?
Robert O'Rourke
Feb 25, 2009, 12:49:01 PM2/25/09
to proces...@googlegroups.com
Howdy weevil
Yep, I've done this before. You can take the canvas out of flow with
position: absolute; or position: fixed;
Next you will need to set position: relative; on your content area and
give it a z-index that's higher than the z-index of the canvas element eg:
Markup:
<body>
<div id="content">
<h1>Page Title</h1>
...etc...
</div>
<canvas></canvas>
</body>
CSS:
#content {
position: relative;
z-index: 2;
margin: 50px;
}
canvas {
width: 500px;
height: 500px;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px;
}
My blog is an example http://www.sanchothefat.com/blog/ - try clicking
and dragging on the background
-Rob
weevil
Feb 25, 2009, 1:52:51 PM2/25/09
to Processing.js
Oh awesome! I don't know why I didn't think of styling the canvas
itself. Thanks!
> My blog is an examplehttp://www.sanchothefat.com/blog/- try clicking
itself. Thanks!
dire...@hyper-metrix.com
Feb 25, 2009, 3:22:33 PM2/25/09
to Processing.js
Of course the other thing you can do is use ctx.clearRect
(x,y,width,height) to clear a transparent hole in the canvas.
I added this funciton to Processing.js:
p.clear = function clear ( x, y, width, height ){
if(arguments.length==0){
curContext.clearRect( 0, 0, p.width,
p.height );
} else {
curContext.clearRect( x, y, width, height );
}
}
then I can just do this from my Processing.js script:
clearRect(x,y,width,height);
> > My blog is an examplehttp://www.sanchothefat.com/blog/-try clicking
(x,y,width,height) to clear a transparent hole in the canvas.
I added this funciton to Processing.js:
p.clear = function clear ( x, y, width, height ){
if(arguments.length==0){
curContext.clearRect( 0, 0, p.width,
p.height );
} else {
curContext.clearRect( x, y, width, height );
}
}
then I can just do this from my Processing.js script:
clearRect(x,y,width,height);
Reply all
Reply to author
Forward
0 new messages