CODEWITHSUNDEEP
javascripthtmlhtml5-canvasradial-gradients
Ma7moud El-Naggar
Ma7moud El-Naggar

Reputation: 558

Drawing none Circular gradient

In HTML5 when we want to fill shape by radial gradient we use:

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

but this fill shapes by circular radial gradient. How to fill it by elliptic radial gradient?

Upvotes: 0

Views: 692

Answers (1)

robertc
robertc

Reputation: 75707

Transform the canvas context before you draw the gradient (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);

Upvotes: 1

Related Questions