Fun with HTML Canvas

Just for kicks, I created a little script that would generate gradients, and put it as a placeholder on one of my domains.

The following code shows how I’m rendering the gradients.

<html>
<script type="text/javascript">
var i;
var rfactor = 255, gfactor=55, bfactor=155;

var j;
var canvas;
var context;
var direction=1;

function init(){
    canvas = document.getElementById('thecanvas');
    if (canvas.getContext){
      context = canvas.getContext('2d');
      if (context) {
        i=0; j=0;
        setInterval(drawSquare, 5);
      }
    }
}

function drawSquare(){
    var rows = 8;
    var cols = 8;

    var gridheight = 100;//context.height/rows;
    var gridwidth = 100;//context.width/cols;
    var r = Math.round((rfactor/rows) * i);
    var g = Math.round((gfactor/rows) * i);
    var b = Math.round((bfactor/rows) * i);
    context.fillStyle = 'rgba(' + r + ', ' + g + ', ' + b + ', 0.5)';
    context.fillRect(0,0,50,50);
    context.fillRect(0,750,50,800);
    context.fillRect(750,0,800,50);
    context.fillRect(750,750,800,800);
    context.fillRect(gridwidth*i,gridheight*j, gridwidth, gridheight);

    j=j+1;
    if (j>rows){
       i++;
       if (i > rows){
               i=0;
               rfactor = Math.round(Math.random() *255);
               gfactor = Math.round(Math.random() *255);
               bfactor = Math.round(Math.random() *255);
               //context.clearRect(0,0, 800,800);
       }
      j=0;
    }
}

</script>

        <body onLoad="init()">
                <p>
                <canvas id="thecanvas" width="800" height="800"></canvas>
                </p>
        </body>
</html>

I’m very late on keeping my blog up to date on all the HTML canvas stuff I have been working on. Hopefully I will find the time to get a post or two together about a couple HTML / Canvas projects I have been working on. Until then 🙂