<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
for (var yay=-1500; yay<canvas.height; yay+=7) {
var startX = 1000;
var startY = yay-2000;
var endX = canvas.width;
var endY = canvas.height;
var cpointX = yay+200;
var cpointY = -yay;
context.beginPath();
context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
//context.closePath();
context.strokeStyle = "rgb(200,0,0)";
context.fillStyle = "rgb(0,0,255)";
context.fill();
context.lineWidth = 2;
context.stroke();
}
/////// BEZIER CURVE 1
for (var i=0; i<canvas.height; i+=10) {
var startX = 3;
var startY = 800;
// starting point coordinates
var endX = 1000;
var endY = i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 275;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(64,224,208)";
context.stroke();
}
/////// BEZIER CURVE 2
for (var i=0; i<canvas.height; i+=10) {
var startX = 50;
var startY = +800;
// starting point coordinates
var endX = i;
var endY = -1000;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 175;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 2;
context.strokeStyle = "rgb(0,224,208)";
context.stroke();
}
/////// BEZIER CURVE 3
for (var i=0; i<canvas.height; i+=10) {
var startX = -3;
var startY = 800;
// starting point coordinates
var endX = -1000;
var endY = -i;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 275;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgb(64,224,208)";
context.stroke();
}
// rays yellow bottom left
for (var i=0; i<canvas.height; i+=35) {
var startX = -500;
var startY = i;
var endX = i;
var endY = 600;
var r = 2;
var g = 2;
var b = 2;
context.beginPath();
context.strokeStyle = "rgb(255,255,0)";
context.lineCap = 'round'; // "butt" "square"
context.lineWidth = i/400;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
}
// rays yellow bottom left
for (var i=canvas.width/2; i<canvas.height; i+=35) {
var startX = 900;
var startY = i;
var endX = i;
var endY = 600;
var r = 2;
var g = 2;
var b = 2;
context.beginPath();
context.strokeStyle = "rgb(255,255,0)";
context.lineCap = 'round'; // "butt" "square"
context.lineWidth = i/400;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
