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

Question

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

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

The gradient should go from rgba (0,0,0,0,0,8) to rgba (0,0,0,0,2,2,2), but I don't get the canvas to be 1280x720px.

+3

javascript html5 canvas radial-gradients

hachev Mar 22 '11 at 8:39

source share

1 answer

Agnius vasiliauskas · Accepted Answer · 2011-03-22T09:42:12+0000

The gradient in your example image differs from 0x828282to 0x0a0a0a. Check this:

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>

Run code

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

More articles: