สร้าง JS Radial Gradient พร้อม Matrix Transform ใน HTML Canvas

โค้ดสร้าง Radial Gradient พร้อม Scaling และ Rotation

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// สร้าง Radial Gradient
var gradient = ctx.createRadialGradient(
    100/horizontalScale, 100/verticalScale, 100,   // วงกลมใน (x, y, r)
    100/horizontalScale, 100/verticalScale, 0      // วงกลมนอก (x, y, r)
);
gradient.addColorStop(1, "green");
gradient.addColorStop(0, "red");

// ใช้ Matrix Transform
ctx.scale(horizontalScale, verticalScale); // ย่อ/ขยาย
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 100/horizontalScale, 100/verticalScale);

// รีเซ็ต Transform
ctx.setTransform(0, 1, 1, 0, 1, 1);

HTML

<canvas id="canvas" width="300" height="300"></canvas>
<style>canvas { background-color: purple; }</style>

การใช้ setTransform รีเซ็ต matrix กลับสู่ค่าเริ่มต้นก่อนทำ transform ใหม่