Canvas Test GradientWipe

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 = 1;
var stepping = 1 / (duration * drawInterval);
var intervalId;

var progress = 0.0;

var draw = function() {
    

    
    var w = canvas.width;
    var h = canvas.height;
    
    context.save();
//    context.beginPath();
    
    
        context.rect(0,0,canvas.width,canvas.height);
       context.fillStyle="red";
    context.fillRect(0,0,canvas.width,canvas.height);
    
    //////////////////
    
    var canvasMidW = w/2;
    var canvasMidH = h/2;

    
    context.globalCompositeOperation = "destination-out";
    
    
    
        var gradient = context.createLinearGradient(0, 0, w, 0);

        gradient.addColorStop(progress, "rgba(255, 255, 255, 0)");
        gradient.addColorStop(Math.min(progress+0.1, 1), "rgba(0, 0, 0, 1.0)");
    
        context.fillStyle = gradient;
        context.fillRect(0, 0, w, h);

    
        if (progress + stepping > 1) {
        progress = 1;
    } else {
        progress += stepping;
    }
    
    //////////////////

   // context.clip();
    
   /*ontext.rect(0,0,canvas.width,canvas.height);
       context.fillStyle="red";
    context.fillRect(0,0,canvas.width,canvas.height);*/
    
    if (progress === 1) {
        clearInterval(intervalId);
    }
    context.restore();
};



var startAnimation = function() {

    intervalId = setInterval(draw, drawInterval);
    //draw();
};

var resetAnimation = function() {
    clearInterval(intervalId);
    progress = 0;
    context.restore();
    canvas.width = canvas.width;
    canvas.height = canvas.height;
    lastSnake = 0;
};
var stopAnimation = function() {
    clearInterval(intervalId);
};



jQuery(document).ready(function(){

    canvas = $("#myCanvas")[0];
    context = canvas.getContext("2d");
    
    $("#start").on("click", function(){
        startAnimation();
    });
    
    $("#stop").on("click", function(){
        stopAnimation();
    });
    
    $("#next").on("click", function(){
 ...