Neill's Blog

Using a canvas for a dynamic(ish) background image

Using a canvas to provide a dynamic background

For tedious reasons the image I had chosen for this blog's background wasn't suitable.

A bit of googling found the suggestion of using a dynamically generated image as a background via a canvas.

The one I settled on is from https://codepen.io/tmrDevelops/pen/wMJNjr - that makes a nice abstract grey patterned background.

Figuring out exactly how to use that for my use case sent me down a few rabbit holes.

I basically ended up using the script from above with a few minor modifications.

At the start of the script

var c = document.getElementById('canv')

Becomes

var c = document.createElement('canvas');

And at the end add:

document.getElementById('index').style.backgroundImage = "url(" + c.toDataURL("image/png")+ ")";

Credit for this solution to https://stackoverflow.com/a/9369248 (modified slightly because that solution assumes jquery)

This method means that the background no longer updates on events, it's generated once when the page loads. I may try to fix this later, but I don't really care all that much.