<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start here

var inc = 10;

for (var i=0; i < canvas.height; i+=inc ) {

context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i); // increment is 20
context.lineTo(0,0);
context.fillStyle = "rgba(0,255,255,0.01)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(i, canvas.height/2);
context.lineTo(canvas.width/2, canvas.height/2-i);
context.lineTo(canvas.width/2, canvas.height/2);
context.fillStyle = "rgba(255,0,0,0.01)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, i);
context.lineTo(i, canvas.height/2);
context.lineTo(0, canvas.height/2);
context.fillStyle = "rgba(0,255,0,0.01)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(i, 0);
context.lineTo(canvas.width/2, i);
context.lineTo(canvas.width/2, 0);
context.fillStyle = "rgba(0,0,255,0.01)";
context.fill();
context.stroke();
context.closePath();

context.strokeStyle = "black";
context.lineWidth = 1;

}

////////////////////////////////////// end here

};

</script>