Setting Canvas to Background - Javascript

Question

I am trying to figure out how to turn the canvas I have created into the background image of the HTML body. Thanks!

<head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      canvas.style.background = '#D1E0FF';
      var context = canvas.getContext("2d");
      for (i=0; i<20; i++) {
        context.fillStyle = '#FF8533';
        context.fillRect (
            Math.round(Math.random()*300*100)/100,
            Math.round(Math.random()*300*100)/100,
            30,
            30
          );
      }
    var backgroundURL = canvas.toDataURL();
    ???
    }
  </script>
</head>

<body onload="draw();">
  <canvas id="canvas" width="300px" height="300px"></canvas>
</body>

score 2 · Answer 1 · answered Dec 17 '13 at 19:35

With CSS you can use

-webkit-canvas of course only on webkit browsers. To achieve a similar effect on Firefox you would use

-moz-element

Live demo

CSS

body{
    background: -webkit-canvas(background);
}

JavaScript

var ctx = document.getCSSCanvasContext('2d', 'background', 300, 300);

// make some random rects
var i = 50;
while(i--){
    ctx.fillRect(Math.random()*300, Math.random()*300, Math.random()*50, Math.random()*50);
}

More Information on webkit method

More information on Firefox method

score 1 · Answer 2 · answered Dec 17 '13 at 19:07

1

if you were using jQuery

$('body').css("background-image", backgroundURL);

answered Dec 17 '13 at 19:07

Zuriel

1,848
1
19
32

Wayne · Answer 3 · 2013-12-17T19:26:20.857

toDataURL method returns a URL equivalent., you need to place it in a place for a URL.

object.style.backgroundImage="url("+canvas.toDataURL()+")";

I would tag the body element with an ID for this.

document.getElementById("mypage").style.backgroundImage="url("+canvas.toDataURL()+")";

There are of course other ways to get the body object.

Update

per dontvotemedown, I believe you need argument for toDataURL()

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

Like on this answer, you can try this:

$('body').css({'background-image':"url(" + canvas.toDataURL("image/png")+ ")" });

edited May 23 '17 at 10:32

Community

1
1

answered Dec 17 '13 at 19:22

DontVoteMeDown

21,122
10
69
105

'image/png' would be needed, none the less a good answer. – Wayne Dec 17 '13 at 19:23
@Wayne yeah, or whatever is the image's mime-type. – DontVoteMeDown Dec 17 '13 at 19:25

Setting Canvas to Background - Javascript

4 Answers4

CSS

JavaScript

Linked