Dual gradients

rotated dual gradients

by rob Davis

HTML

<body>
    <div>
        <canvas id="canvasId" width="500" height="500"></canvas>
        <canvas id="canvasId2" width="500" height="500"></canvas>
    </div>
</body>

CSS

body {
          margin: 0px;
          padding: 0px;
            background-color:black;
          }
div { background-color:white;  width:500px; height:500px }

JavaScript

var angle = 40;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

        function incrementAngle() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }
	var startx = 0;
	var starty = 250;
	var endx = 0;
	var endy = 0;
    doDraw();
		
function doDraw() 
{

	var contextB = document.getElementById('canvasId2').getContext("2d");


	var gradient1 = contextB.createLinearGradient(250,0,250,500);
	gradient1.addColorStop(0, "#ff0000");
	gradient1.addColorStop(1, "#000000");
	
	line(20,contextB,gradient1);

	var contextA = document.getElementById('canvasId').getContext("2d");
//	contextA.save();                
//	contextA.translate(250,250);
//	contextA.rotate(convertToRadians(45));
	contextA.putImageData(contextB.getImageData(0,0,500,500),0,0);
//	contextA.restore();


	var gradient2 = contextB.createLinearGradient(250,0,250,500);
	gradient2.addColorStop(0, "#ffff00");
	gradient2.addColorStop(1, "#000000");

	line(145,contextB,gradient2 );
contextA.putImageData(contextB.getImageData(0,0,500,500),0,0);
}

function line(a,contextB, grad) {
	contextB.beginPath();
	contextB.strokeStyle=grad;
	contextB.save();                
	contextB.translate(250,250);
	contextB.rotate(convertToRadians(a));
	contextB.moveTo(startx,starty);
	contextB.lineWidth = 50;
	contextB.lineJoin = "round";	
	contextB.lineTo(endx,endy);
	contextB.stroke();
	contextB.restore();
	contextB.closePath();
}