canvas multiple gradient

by Ron Eaglin

HTML

This example uses successive linear gradients to demonstrate a heat map of wind load
using a dummy function on multiple grid squares. This will be modified to use a successive color density in future work. Also new input styles for variables will be created. 
<div class="block">
    <label>Velocity:</label> 
    <input id ="velocity" type="number" min="0" max="200" value="100" class="textbox" />
</div>
<div class="block">
    <label>Wind Angle (degrees from top):</label> 
    <input id="angle" type="number" min="0" max="360" value="180"/>
</div><br/>
<button type="button" id="drawGrid">Draw Grid</button>
<button type="button" id="calculate">Calculate</button>
<canvas id="canvas1" width="500" height="500"></canvas><br/>

CSS

.block label { display: inline-block; width: 240px; text-align: right; }
.block input {width: 60px; text-align: left }

JavaScript

$(document).ready(function () {

        $("#drawGrid").click(
            function () {
                drawGrid();
            });    
      
      $("#calculate").click(
        function () {
          calculate();
      });
      
    });

    var trueWidth = 500;
    var trueHeight = 300;
    var margin = 10;
    var nRows = 9;
    var nColumns = 3;

function Point(x,y)
{
    this.x = x;
    this.y = y;
}

function drawCircles() {
    var can = document.getElementById('canvas1');
    var canvas = can.getContext('2d');

    canvas.beginPath();
    canvas.arc(350, 400, 100, 0, 2 * Math.PI, false);
    canvas.strokeStyle = 'lightblue';

    var grad = canvas.createLinearGradient(350, 110, 100, 330); //(x0,y0) to (x1,y1)
    grad.addColorStop(0, 'red');
    grad.addColorStop(1, 'yellow');
    canvas.fillStyle = grad;
    canvas.fill();
    canvas.stroke();

    canvas.beginPath();
    canvas.arc(340, 140, 100, 0, 2 * Math.PI, false);
    canvas.strokeStyle = 'lightblue';

    var grad = canvas.createLinearGradient(340, 140, 360, 160); //(x0,y0) to (x1,y1)
    grad.addColorStop(0, 'red');
    grad.addColorStop(1, 'yellow');
    canvas.fillStyle = grad;
    canvas.fill();
    canvas.stroke();
}

function drawGrid() {
    var canvas = document.getElementById('canvas1');
    var ctx = canvas.getContext('2d');

    /* Generates a grid based on the canvas size */
    var xSize = (canvas.width - 2 * margin) / nRows;
    var ySize = (canvas.height - 2 * margin) / nColumns;

    drawGridLines(ctx, margin, margin, nRows, nColumns, xSize, ySize);
}

function drawGridLines(ctx, x0, y0, xCells, yCells, xSize, ySize) {
    // Draw X lines
    for (var i = 0; i < xCells + 1; i++) {
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x0 + i * xSize, y0);
        ctx.lineTo(x0 + i * xSize, y0 + xCells * xSize);
        ctx.stroke();
    }
    // Draw Y lines
    for (var i = 0; i < yCells + 1; i++) {
        ctx.lineWidth = 2;
        ctx.beginPath();
       ...