Canvas Test DiagonalGrowingRect

Testing some stuff

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() {
   
    

    
    var w = canvas.width;
    var h = canvas.height;
    

d = 7
context.lineWidth = d;
//context.lineJoin = "round";
    context.beginPath();
context.moveTo(0,h-30);
context.lineTo(150,h-30);
context.lineTo(150,h-30-d*2);
context.lineTo(130,h-30-d*2);
context.lineTo(90,h-30-d);
context.lineTo(0,h-30-d);
context.strokeStyle = "green";
context.stroke();
context.fillStyle = "white";
context.fill();
context.closePath();
    
};








jQuery(document).ready(function(){

    canvas = $("#myCanvas")[0];
    context = canvas.getContext("2d");
    draw();
    
    
    
});