Drawing none Circular gradient

Question

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? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

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);