html5 canvas background.src,html - HTML5 generate canvas background image - Stack Overflow

CSS

#wrapper canvas {

position: relative;

}

#wrapper canvas {

border: 1px solid red;

position: absolute;

background-color: transparent;

}

HTML

JavaScript

function drawRadial(elemId, startColor, endColor, x0, y0, r0, x1, y1, r1) {

var canvas = document.getElementById(elemId);

var context = canvas.getContext('2d');

context.rect(0, 0, canvas.width, canvas.height);

// create radial gradient

var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);

grd.addColorStop(0, startColor);

grd.addColorStop(1, endColor);

context.fillStyle = grd;

context.fill();

delete canvas;

delete context;

delete grd;

}

drawRadial('myCanvas', 'rgba(248,173,133,1.0)', 'rgba(0,0,0,0.0)', 50, 25, 110, 300, 50, 400);

drawRadial('myCanvas2', 'rgba(213,215,155,1.0)', 'rgba(0,0,0,0.0)', 500, 150, 110, 500, 50, 600);

You can add as many layers as you want. Just add another;

.. where # is the new number of your layer (keep them in the correct order to get the correct results tho. You could even go as far with JavaScript as just start with an empty #wrapper and just fill it dynamically with canvas-incremented ID's and then binding the full drawing procedure to it. Giving you super clean code while maintaining control over the content.

Play around with the coordinates and the size of the radials and it'll fit soon enough like you want it. I'll leave the rest of the creativity to you ;)