<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle Variables
var rectx = 0;
var recty = 0;
//Rectangle Linear Gradient Variables
var startX = 0;
var startY = 0;
var grdendX = canvas.width;
var grdendY = canvas.height;
//Background Rectangle
context.beginPath();
context.rect(rectx, recty, canvas.width, canvas.height);
var grd = context.createLinearGradient(startX, startY, grdendX, grdendY);
grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();
//face
context.beginPath();
context.arc(150, 140, 150, 0, 2 * Math.PI, false);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "grey";
context.strokeStyle = "black";
context.stroke();
context.fill();
//pupil
context.beginPath();
context.arc(120, 130, 20, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(255, 255, 255)";
context.stroke();
context.fill();
//2nd pupil
context.beginPath();
context.arc(123, 133, 4, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(0, 0, 255)";
context.stroke();
context.fill();
//1st eye
context.beginPath();
context.arc(180, 130, 20, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(255, 255, 255)";
context.strokeStyle = "black";
context.stroke();
context.fill();
//2nd eye
context.beginPath();
context.arc(183, 133, 4, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(0, 0, 255)";
context.strokeStyle = "black";
context.stroke();
context.fill();
//smile
context.beginPath();
context.arc(150, 170, 60, 0, 3, false);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "#C0C0C0";
context.fillStyle = "black";
context.stroke();
context.fill();
//Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 300;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 280;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 300;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();
//Second Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();
//Third Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 180)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 180)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "00BFFF";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();
//circle
context.beginPath();
context.arc(700, 100, 40, 0, 2 * Math.PI, false);
context.fillStyle = "gold";
context.fill();
context.lineWidth = 200;
context.strokeStyle = "black";
context.stroke
context.font = 'italic 40pt Calibri';
context.fillStyle = 'silver';
context.fillText('Talking to the Moon', 300, 250);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
That's so cute!
ReplyDeletethank you :)
ReplyDelete