Search code examples
javascripthtmlcanvasradial-gradients

Drawing a opacity radial gradient on a HTML canvas and use it as a background

I'm looking for a way to make a canvas object look like this: http://www.onetuts.com/attachments/2010/05/07/1_201005072156152XYem.jpg

The gradient should be going from rgba(0,0,0,0.8) to rgba(0,0,0,0.2) but i don't get the canvas to be 1280x720px.

Solution

  • Gradient in your example image is different - from 0x828282 to 0x0a0a0a. Check this out:

    var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var grd = cxt.createRadialGradient(150, 150, 0, 150, 150, 150);

grd.addColorStop(0, "#828282");
grd.addColorStop(1, "#0a0a0a");
cxt.fillStyle = grd;
cxt.fillRect(0, 0, 300, 300);
    <canvas id="myCanvas" width="300" height="300"></canvas>