<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var centerx = 400;
var centery = 300;
var centerx2 = 375;
var centery2 = 275;
var centerx3 = 425;
var centery3 = 275;
var centerx4 = 400;
var centery4 = 325;
var radius6 = 10;
var radius = 100;
var radius1 = 25;
var radius2 = 200;
var radius3 = 300;
var radius4 = 400;
var radius5 = 500;
var radius7 = 50;
context.beginPath();
context.arc(centerx, centery, radius5, 0, Math.PI*2, true);
context.closePath();
context.lineWidth = 5;
var grd = context.createRadialGradient(400, 300, 0, 400, 300, 300);
grd.addColorStop(0,'rgb(0, 0, 0)');
grd.addColorStop(.8,'rgb(100, 0, 0)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.arc(centerx, centery, radius4, 0, Math.PI*2, true);
context.closePath();
context.lineWidth = 5;
var grd = context.createRadialGradient(400, 300, 100, 400, 300, 300);
grd.addColorStop(0,'rgb(0, 0, 0)');
grd.addColorStop(.1,'rgb(100, 0, 0)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.arc(centerx, centery, radius3, 0, Math.PI*2, true);
context.closePath();
context.lineWidth = 5;
var grd = context.createRadialGradient(400, 300, 200, 400, 300, 300);
grd.addColorStop(0,'rgb(0, 0, 0)');
grd.addColorStop(1,'rgb(100, 0, 0)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.arc(centerx, centery, radius2, 0, Math.PI*2, true);
context.closePath();
context.lineWidth = 5;
var grd = context.createRadialGradient(400, 300, 300, 400, 300, 300);
grd.addColorStop(0,'rgb(0, 0, 0)');
grd.addColorStop(1,'rgb(100, 0, 0)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.arc(centerx, centery, radius, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = 'rgb(255, 200, 20)';
context.fill();
context.lineWIdth = 5;
var grd = context.createLinearGradient(0,300, canvas.width, 300);
grd.addColorStop(0, 'rgb(255, 255, 255)');
grd.addColorStop(1, 'rgb(0, 0, 255)');
context.strokeStyle = grd;
context.stroke();
context.beginPath();
context.arc(centerx, centery, radius1, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = 'rgb(5, 200, 20)';
context.fill();
context.lineWIdth = 5;
context.stroke();
context.beginPath();
context.arc(centerx2, centery2, radius6, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = 'rgb(5, 20, 200)';
context.fill();
context.lineWIdth = 5;
context.stroke();
context.beginPath();
context.arc(centerx3, centery3, radius6, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = 'rgb(5, 20, 200)';
context.fill();
context.lineWIdth = 5;
context.stroke();
context.beginPath();
context.arc(centerx4, centery4, radius7, 0, Math.PI, false);
context.closePath();
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.lineWidth = 2;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
