Рисование ни круговой градиент

Question

В HTML5, когда мы хотим, чтобы заполнить форму радиальным градиентом мы используем:

ctx.createRadialGradient(centerX1, centerY1, radius1, centerX2, centerY2, radius2); 

но это заполнить форму круговой радиальным градиентом. Как заполнить его эллиптическим радиальным градиентом?

Answer 1

Transform контекст холста, прежде чем рисовать градиент (example):

var c = document.getElementById('mycanvas'); 
var ctx = c.getContext('2d'); 
var radgrad = ctx.createRadialGradient(100,100,20,100,100,50); 
radgrad.addColorStop(0, '#A7D30C'); 
radgrad.addColorStop(0.9, '#019F62'); 
radgrad.addColorStop(1, 'rgba(1,159,98,0)'); 
ctx.scale(1,0.5); 
ctx.fillStyle = radgrad; 
ctx.fillRect(50,50,150,150);