Tạo JS Radial gradient với ma trận trong HTML

JSRadial gradient với ma trận được tạo theo cách sau. Bạn có thể thử chạy theo cách sau để tạo JS Radial gradient với ma trận -

var canvas1 = document.getElementById("canvas"); //canvas1 variable to identify given canvas
var ctx1 = canvas.getContext("2d"); //This is used to tell context is 2D  

var gradient1 = ctx1.createRadialGradient(100/horizontalScale, 100/verticalScale, 100,
100/horizontalScale,100/verticalScale,0); //This will create gradient with given canvas context  

gradient1.addColorStop(1,"green"); //New color green is added to gradient
gradient1.addColorStop(0,"red"); //New color red is added to gradient

ctx1.scale(horizontalScale, verticalScale); //Context matrix ctx1 is shrinked according to horizaontal
and vertical scale
ctx1.fillStyle = gradient; //Given gradient is drawn
ctx1.fillRect(0,0, 100/horizontalScale, 100/verticalScale); //Rectangle is stretched according to scale
ctx1.setTransform(0,1,1,0,1,1);  //Context matrix is reset

canvas {    
   background-color: purple;
}
//Canvas is drawn with background color purple

<canvas id = "canvas" width = "300" height = "300"></canvas>