Canvas Test Squares

Testing some stuff

by joquery

HTML

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

<div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="next">Next</button>
    <button id="reset">Reset</button>
</div>

CSS

#myCanvas {
    background: #fafaee;
}

JavaScript

var context;
var canvas;
var drawInterval = 1000.0 / 30.0;
var duration = 2;
var stepping = 1 / (duration * drawInterval);
var intervalId;

var progress = 0.0;




var draw = function() {
    
    if (progress + stepping > 1) {
        progress = 1;
    } else {
        progress += stepping;
    }
    
    context.save();
    context.beginPath();
    
    var ratio = canvas.width / canvas.height;
    
    var w = canvas.width;
    var h = canvas.height;
    
    var numberOfVerticalSquares = 6;
    var numberOfHorizontalSquares = Math.floor(numberOfVerticalSquares * ratio);
    
    var maxSquareWidth = w / numberOfHorizontalSquares;
    var maxSquareHeight = h / numberOfVerticalSquares;
    
    var largerSideWH = Math.max(w, h);
    
    for (var x = 0; x < numberOfHorizontalSquares; x++) {
        
        for (var y = 0; y < numberOfVerticalSquares; y++) {
            
            var centerX = (x + 0.5) * maxSquareWidth;
            var centerY = (y + 0.5) * maxSquareHeight;
            
            
            var factor = Math.max(0, Math.min(3 * progress - (centerX / canvas.width) - (centerY / canvas.height), 1));
            
            var squareWidth = maxSquareWidth * factor;
            var squareHeight = maxSquareHeight * factor;
            
            
            //var radius = Math.max(0, (progress * maxRad) - (centerX / canvas.width));
            //var radius = Math.max(0, Math.min(2*progress - centerX / canvas.width, 1)) * maxRad;
            
            var topX = centerX - (squareWidth / 2);
            var topY = centerY - (squareHeight / 2);
            
            context.rect(topX, topY, squareWidth, squareHeight);
            
        }
        
    }
    
  //context.stroke();  
    
    //context.closePath();

    context.clip();
    
    context.rect(0,0,canvas.width,canvas.height);
       context.fillStyle="red";
    context.fillRect(0,0,canvas.width,canvas.height);
    
    if (progress === 1) {
       ...