By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,730 Members | 1,559 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,730 IT Pros & Developers. It's quick & easy.

Canvas repeat and align problem, help pls.

ilya Kraft
100+
P: 134
Hello I have this interactive canvas as a background of my web, it is on 100% width and high, but when I add content that continues longer than canvas and you have to scroll down, canvas is not repeating down y axis.

Also can anyone tell how can i center align absolute positioned <div>.

I added white box that is longer than canvas, if you scroll down you start to see black background, how can I make canvas repeat down y-axis and how do i center that white box (which is absolute positioned div)

Here is code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset=utf-8 /> 
  5. <title>Canvas by Ilya</title> 
  6. <style> 
  7. body {
  8.     background: #000;
  9.     margin-left: 0px;
  10.     margin-top: 0px;
  11.     margin-right: 0px;
  12. }
  13. canvas {
  14.   position: absolute;
  15.   top: 0;
  16.   left: 0;
  17.   height: 100%;
  18.   width: 100%;
  19.  
  20. }
  21. body,td,th {
  22.     color: #000;
  23. }
  24.  
  25.  
  26. #repeattest {
  27.     background-color: #FFF;
  28.     position: absolute;
  29.     height: 2552px;
  30.     width: 88px;
  31.     left: 62px;
  32.     top: 1px;
  33. }
  34. </style> 
  35.  
  36. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  37. </head> 
  38. <body> 
  39. <canvas height="600" width="600"></canvas> 
  40. <script> 
  41. var canvas = document.getElementsByTagName('canvas')[0],
  42.     ctx = null,
  43.     grad = null,
  44.     body = document.getElementsByTagName('body')[0],
  45.     color = 255;
  46.  
  47. if (canvas.getContext('2d')) {
  48.   ctx = canvas.getContext('2d');
  49.   ctx.clearRect(0, 0, 600, 600);
  50.   ctx.save();
  51.   // Create radial gradient
  52.   grad = ctx.createRadialGradient(0,0,0,0,0,600); 
  53.   grad.addColorStop(0, '#000');
  54.   grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
  55.  
  56.   // assign gradients to fill
  57.   ctx.fillStyle = grad;
  58.  
  59.   // draw 600x600 fill
  60.   ctx.fillRect(0,0,600,600);
  61.   ctx.save();
  62.  
  63.   body.onmousemove = function (event) {
  64.     var width = window.innerWidth, 
  65.         height = window.innerHeight, 
  66.         x = event.clientX, 
  67.         y = event.clientY,
  68.         rx = 600 * x / width,
  69.         ry = 600 * y / width;
  70.  
  71.     var xc = ~~(256 * x / width);
  72.     var yc = ~~(256 * y / height);
  73.  
  74.     grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 0.01); 
  75.     grad.addColorStop(0, '#000');
  76.     grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
  77.     // ctx.restore();
  78.     ctx.fillStyle = grad;
  79.     ctx.fillRect(0,0,600,600);
  80.     // ctx.save();
  81.   };
  82. }
  83. </script>
  84. <div id="repeattest">
  85.   <p>Scroll</p>
  86.   <p> Down<br>
  87.   </p>
  88. </div>
  89.  
  90.  
  91. </body> 
  92. </html>
  93.  
Jan 12 '11 #1

✓ answered by Rabbit

Change the canvas from absolute to fixed. I'm not sure what you mean by center the div. Are you talking about centering what's inside the div? Or centering the div on the page?

Share this Question
Share on Google+
5 Replies


Rabbit
Expert Mod 10K+
P: 12,383
Change the canvas from absolute to fixed. I'm not sure what you mean by center the div. Are you talking about centering what's inside the div? Or centering the div on the page?
Jan 12 '11 #2

ilya Kraft
100+
P: 134
changing it to fixed position helped thanks, i mean centering a div on a page.
Thanks for help with canvas again )))
Jan 12 '11 #3

Rabbit
Expert Mod 10K+
P: 12,383
Have one master div that's absolutely positioned at 0,0 with 100% width and height. That will be the wrapper for the rest of the content. You can now treat everything within that div as if it's the <body> of the document. You would center anything within it the same way you would center it if you didn't have a canvas for a background or a div as a wrapper.
Jan 12 '11 #4

ilya Kraft
100+
P: 134
Thank you again ))) you are awesome!!! ;D
Jan 12 '11 #5

Rabbit
Expert Mod 10K+
P: 12,383
No problem, good luck.
Jan 12 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.