<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//REFLECTION
context.beginPath();
context.rect(0, 0, 600, 600);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(1, "rgb(31,63,169)");
// dark blue
grd.addColorStop(1, "rgb(31,83,202)");
context.fillStyle = grd;
context.fill();
context.rect(0, 0, 600, 600);
context.fillStyle = ("rgba(0,0,0,0.2)");
context.fill();
//BLACK BACKDROP SPACE
context.beginPath();
context.rect(0, 0, 600, 320);
// add linear gradient
var grd = context.createLinearGradient(0, 0, 0.4, canvas.height);
// light blue
grd.addColorStop(0, 'green');
// dark blue
grd.addColorStop(0.5,"rgb(0,0,0)");
context.fillStyle = grd;
context.fill();
//AURORA
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
grd.addColorStop(.855, "rgb(94,3,101)");
// Bezier Curve
context.beginPath();
context.moveTo(0, 120);
context.bezierCurveTo(200, 250, 388, 10, 600, 190);
context.lineTo(600,0);
context.lineTo(0,0);
context.lineTo(0,120);
context.lineWidth = 5;
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
grd.addColorStop(.855, "rgb(94,3,101)");
context.fillStyle = grd;
context.fill();
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
grd.addColorStop(.855, "rgb(94,3,101)");
context.fillStyle = grd;
context.strokeStyle = grd;
context.stroke();
//WATER RIPPLE BEHIND ONE
context.beginPath();
context.moveTo(140,420);
context.bezierCurveTo(260,300,800,100,300,300);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//WATER RIPPLE BEHIND TWO
context.beginPath();
context.moveTo(140,400);
context.bezierCurveTo(260,300,800,100,300,300);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//OCEAN
context.beginPath();
context.moveTo(0, 520);
context.bezierCurveTo(200, 320, 388, 650, 600, 410);
context.lineTo(600,600);
context.lineTo(0,600);
context.lineTo(0,320);
context.lineWidth = 5;
var grd = context.createLinearGradient(0, 600, 600, 600);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, "rgb(13,47,127)");
context.fillStyle = grd;
context.fill();
//WHALE BODY
context.beginPath();
context.moveTo(175, 350);
context.bezierCurveTo(350, 120, 500, 400, 420, 100);
context.bezierCurveTo(450, 3, 600, 400, 500, 310);
context.bezierCurveTo(600, 300, 50, 550, 175, 350);
context.lineWidth = 5;
context.strokeStyle = 'grey';
context.stroke();
context.fillStyle = 'black';
context.fill();
//WHITE PATCH
context.beginPath();
context.moveTo(245, 350);
context.bezierCurveTo(420, 200, 350, 400, 240, 350);
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
context.fillStyle = 'white';
context.fill();
//GREY SADDLE
context.beginPath();
context.moveTo(450, 280);
context.bezierCurveTo(500, 300, 400, 400, 520, 270);
context.lineTo(450,280);
context.lineWidth = 5;
context.strokeStyle = 'silver';
context.stroke();
context.fillStyle = 'silver';
context.fill();
//WATER SPLASH ONE (overlapped)
context.beginPath();
context.moveTo(400, 340);
context.bezierCurveTo(350, 380, 460, 210, 520,330);
context.bezierCurveTo(510, 300, 380, 200, 350, 400);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
context.fillStyle = "rgb(7, 31, 87)";
context.fill();
//WATER SPLASH TWO
// begin custom shape
context.beginPath();
context.moveTo(350, 400);
context.bezierCurveTo(350, 380, 400, 280, 450,330);
context.bezierCurveTo(450, 330, 400, 350, 380, 380);
context.closePath();
context.lineWidth = 5;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
context.fillStyle = "rgb(7, 31, 87)";
context.fill();
//WATER RIPPLE
context.beginPath();
context.moveTo(175,440);
context.bezierCurveTo(500,550,550,100,700,500);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//WATER RIPPLE 2
context.beginPath();
context.moveTo(175,440);
context.bezierCurveTo(550,500,500,100,800,500);
context.lineWidth = 3;
context.strokeStyle = "rgb(15,47,121)";
context.stroke();
//
context.beginPath();
context.moveTo(0, 550);
context.bezierCurveTo(200, 420, 388, 700, 600, 430);
context.lineTo(600,600);
context.lineTo(0,600);
context.lineTo(0,550);
context.lineWidth = 5;
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgba(94,3,101,0.4)");
// GREEN
grd.addColorStop(.25, "rgba(19,145,40,0.3)");
//PURPLE 2
grd.addColorStop(.55, "rgba(94,3,101,0.1)");
// LIGHT BLUE
grd.addColorStop(.656, "rgba(37,241,255,0.1)");
// PURPLE 3
grd.addColorStop(.855, "rgba(94,3,101,0.2)");
context.strokeStyle = grd;
context.stroke();
var grd = context.createLinearGradient(0, 600, 600, 600);
// PURPLE
grd.addColorStop(.12, "rgba(94,3,101,0.8)");
// GREEN
grd.addColorStop(.25, "rgba(19,145,40,0.5)");
//PURPLE 2
grd.addColorStop(.55, "rgba(94,3,101,0.2)");
// LIGHT BLUE
grd.addColorStop(.656, "rgba(37,241,255,0.2)");
// PURPLE 3
grd.addColorStop(.855, "rgba(94,3,101,0.6)");
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
No comments:
Post a Comment