An html5 canvas element in the background of my page?

Question

Is it possible to have a full screen canvas element in the background of a webpage and "normal" markup elements like a table in front of it?

like the following snippet (if it wouldn't be used as alternative content):

<canvas id="imageView" width="100%" height="100%">
    <table>...</table>
</canvas>

score 49 · Accepted Answer · answered Apr 27 '10 at 08:19

49

You could try setting a CSS style on the canvas where it has a position: fixed (or absolute as appropriate), and then any content that follows it (as opposed to container content as you've given in your example) should sit on top of it.

answered Apr 27 '10 at 08:19

Matthew Scharley

127,823
52
194
222

10

tried style="position:fixed; top:0;left:0" and it works just fine. thanx! – user306708 Apr 27 '10 at 08:42
9

just discovered that setting z-index:-1; is needed to put the canvas behind the other elements. – user306708 Apr 27 '10 at 09:46
18

@fx42: Don't set `z-index: -1`, it messes with some browsers. Rather, wrap the rest of your elements in a div and set `z-index: 1` on that div. – Matthew Scharley Apr 27 '10 at 11:03
1

@noinflection: Getting the same results as you: http://jsfiddle.net/zhZxM/1/ I'm assuming this wouldn't have been accepted if it didn't work though, perhaps try getting a response from @user306708 to see if there was something else s/he needed to do? – Matthew Scharley Jul 10 '11 at 11:07
@noinflection: try z-index:-1 on the canvas. – user306708 Jul 12 '11 at 08:04
4

@MatthewScharley: just came across this, but you need position relative/absolute on the div you set the z-index on(http://jsfiddle.net/BlessYAHU/zhZxM/132/). – Bless Yahu Sep 24 '12 at 21:02
1

I tried it in Chrome: `z-index: 1` only worked if position was set for both `
` and `
– Lukas Dec 31 '20 at 19:45

score 8 · Answer 2 · edited Aug 30 '20 at 22:45

<html>
  <style>
    body {
      margin:0;
      padding:0;
    }
    canvas{
      position:absolute;
      left:0;
      top:0;
      z-index:-1;
    }
    div{
      position:absolute;
      z-index:0;
      left:12px;
      top:10px;
    }
  </style>
  <body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #c3c3c3;">
      Your browser does not support the canvas element.
    </canvas>
    <div>hello is floating div</div>

    <script type="text/javascript">
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createLinearGradient(0, 0, 600, 600);

      grd.addColorStop(0, "#FF0000");
      grd.addColorStop(1, "#00FF00");

      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, 600, 600);
    </script>
  </body>
</html>

Firstyl u need js for canvas drawing. but u can attain a canvas element as background just by using CSS. try this script. and may serve ur need :) — Rj Lakhani, May 30 '12 at 04:19

score 8 · Answer 3 · edited Aug 31 '20 at 08:06

I tried it for you with the following code. The div gets placed on top of the canvas element just as Matthew describes it. So should work for you:

<!DOCTYPE HTML>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Canvas demo</title>
  <style type="text/css">
    #canvasSection{ position:fixed;}
  </style>
  <script type="text/javascript">
    function draw()
    {
      //paint the text
      var canvas = document.getElementById('canvasSection');
      var context = canvas.getContext('2d');
    
      context.fillStyle    = '#00f';
      context.font         = 'italic 30px sans-serif';
      context.textBaseline = 'top';
      context.font         = 'bold 30px sans-serif';
      context.strokeText('Your Text!!', 0, 0);

      //paint the square
      var canvasSquare = document.getElementById('canvasSquare');
      var ctxSquare = canvas.getContext('2d');

      ctxSquare.fillStyle='#FF0000';
      ctxSquare.fillRect(0, 100,50,100);
    }
  </script>
  </head>
  <body onLoad="draw()">
    <canvas id="canvasSection">Error, canvas is not supported</canvas>
    <div>TestText</div>
  </body>
</html>

score 2 · Answer 4 · answered Aug 11 '19 at 19:07

You can use toDataURL() to have it in pure JS separated from HTML

var c = document.createElement('canvas'),        
    ctx = c.getContext('2d'),
    size = c.width = c.height = 50;

for( var x = 0; x < size; x++ ){
    for( var y = 0; y < size; y++ ){
        ctx.fillStyle = 'hsl(0, 0%, ' + ( 100 - ( Math.random() * 15 ) ) + '%)';
        ctx.fillRect(x, y, 1, 1);
    }
}

document.body.style.background = 'url(' + c.toDataURL() + ')';

HTML on <b>canvas background</b>

Based on this CodePen

An html5 canvas element in the background of my page?

4 Answers4

Linked