Question

I’m attempting to pull an image (in this case, /camera/frame, which is a known-good JPG), and load it as the background of my document.body.

Here’s my code thus far:

var backgroundImage = new Image();
backgroundImage.onload = function ()
{
    console.log("onload");
    document.body.style.backgroundImage = this.src;
};

backgroundImage.src = 'camera/frame'; 

"onload" prints as expected, and this.src prints out the full URL to /camera/frame, however document.body.style.backgroundImage remains "".

Answer 1

Canvas 2D to the rescue!

var backgroundImage = new Image();
backgroundImage.onload = function ()
{    
    var canvas = document.getElementById('canvas');
    canvas.width = this.width;
    canvas.height = this.height;

    var canvasContext = canvas.getContext('2d');
    canvasContext.drawImage(this, 0, 0, this.width, this.height);
};

backgroundImage.src = 'camera/frame'; 
backgroundImage.width = $(window).width();
backgroundImage.height = $(window).height();

Loads the image in the background, then draws it into the canvas seamlessly!