Create JS Radial gradient with matrix in HTML

JSRadial gradient with matrix is created in the following way. You can try to run the following way to create JS Radial gradient with matrix −

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>