Create JS Radial gradient with matrix in HTML

JavaScript radial gradients with matrix transformations allow you to create scaled and transformed gradient effects on HTML canvas elements. This technique combines gradient creation with matrix scaling operations.

HTML Structure

First, create a canvas element with CSS styling:

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

<style>
canvas {
    background-color: purple;
    border: 1px solid #ccc;
}
</style>

Creating Radial Gradient with Matrix

Here's how to create a radial gradient with matrix scaling applied:

// Get canvas and 2D context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Define scaling factors
var horizontalScale = 2;
var verticalScale = 1.5;

// Create radial gradient with scaled coordinates
var gradient = ctx.createRadialGradient(
    100/horizontalScale, 100/verticalScale, 100,  // Start circle
    100/horizontalScale, 100/verticalScale, 0     // End circle
);

// Add color stops to the gradient
gradient.addColorStop(0, "red");    // Inner color
gradient.addColorStop(1, "green");  // Outer color

// Apply matrix scaling transformation
ctx.scale(horizontalScale, verticalScale);

// Apply gradient as fill style
ctx.fillStyle = gradient;

// Draw rectangle with scaled dimensions
ctx.fillRect(0, 0, 100/horizontalScale, 100/verticalScale);

// Reset transformation matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

How Matrix Scaling Works

The matrix transformation affects how the gradient is rendered:

• horizontalScale - Stretches the gradient horizontally
• verticalScale - Stretches the gradient vertically
• Coordinate division - Gradient coordinates are divided by scale factors to maintain proper positioning
• setTransform() - Resets the transformation matrix to default values

Complete Example

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

<style>
#gradientCanvas {
    background-color: purple;
    border: 2px solid #000;
    margin: 20px;
}
</style>

<script>
function createRadialGradientWithMatrix() {
    var canvas = document.getElementById("gradientCanvas");
    var ctx = canvas.getContext("2d");
    
    // Define transformation scales
    var horizontalScale = 3;
    var verticalScale = 2;
    
    // Create radial gradient
    var gradient = ctx.createRadialGradient(
        150/horizontalScale, 150/verticalScale, 50,  // Inner circle
        150/horizontalScale, 150/verticalScale, 0    // Outer circle
    );
    
    // Add gradient colors
    gradient.addColorStop(0, "blue");
    gradient.addColorStop(0.5, "yellow");
    gradient.addColorStop(1, "red");
    
    // Apply scaling transformation
    ctx.scale(horizontalScale, verticalScale);
    
    // Draw gradient-filled shape
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 150/horizontalScale, 150/verticalScale);
    
    // Reset transformation
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}

// Execute when page loads
window.onload = createRadialGradientWithMatrix;
</script>

Key Parameters

Conclusion

Matrix transformations with radial gradients allow you to create scaled and stretched gradient effects. Always reset the transformation matrix after applying scaling to avoid affecting subsequent drawing operations.