Canvas Final

https://www.wallpaperflare.com/cartoon-astronauts-playing-with-each-other-in-outer-space-background-wallpaper-aaivi

For my final project I created my ideal version of space - all pink - inspired by this wallpaper graphic. A lot of circle codes went into creating the background of this image which are labeled as Space Rocks and Space Details and Saturn. Saturn's ring is a benzier curve, as well as the fire from the jetpack, moon, and limbs of the astronaut. The helmet window and the points of each star were created with quadratic curves. The background uses a gradient effect of three different shades. My goal with this project was to be more 'free' with my work, whereas I usually stick to specific patterns and styles. I was challenged working on a grid and my greatest obstacle was learning how to understand the directions that my codes would be going in. This is evident in the awkwardly shaped limbs of the astronaut. What made this project successful to me was that I appreciated how difficult coding is, which taught me to be patient with myself and accept these imperfections. Overall enjoyed creating this piece!

Hours: 12

Code:

<!doctype html>

<html>

<head>

<title>Final HTML</title>

</head>

<body>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//BACKGROUND

context.beginPath();

context.rect(0, 0, 800, 600);

var grd = context.createLinearGradient(300, 0, 300, 500);

grd.addColorStop(0, "rgb(88,43,113)");

grd.addColorStop(.85, "rgb(174,44,92)");

grd.addColorStop(1, "rgb(207,34,193)");

context.fillStyle = grd;

context.fill();

/// Saturn

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX = canvas.width /3;

var centerY = canvas.height / 2;

var radius = 125;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FE0490';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FE0490';

context.stroke();

context.lineWidth = 3;

context.strokeStyle = "lightsalmon";

context.stroke();

///Crater 1

var centerX = canvas.width / 3;

var centerY = canvas.height / 2.5;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 2

var centerX = canvas.width / 2.5;

var centerY = canvas.height / 2.75;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 3

var centerX = canvas.width / 2.8;

var centerY = canvas.height / 2.9;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 4

var centerX = canvas.width / 2.67;

var centerY = canvas.height / 2.4;

var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 5

var centerX = canvas.width / 5;

var centerY = canvas.height / 2;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 6

var centerX = canvas.width / 4.5;

var centerY = canvas.height / 1.75;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 7

var centerX = canvas.width / 4.3;

var centerY = canvas.height / 1.9;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 8

var centerX = canvas.width / 4;

var centerY = canvas.height / 1.6;

var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 9

var centerX = canvas.width / 2.5;

var centerY = canvas.height / 1.5;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 10

var centerX = canvas.width / 2.6;

var centerY = canvas.height / 1.7;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Crater 11

var centerX = canvas.width / 2.4;

var centerY = canvas.height / 1.63;

var radius =4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'lightsalmon';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'lightsalmon';

context.stroke();

///Ring Left Half

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(163, 230);

ctx.bezierCurveTo(1, 300, 250, 350, 250, 348);

ctx.stroke();

context.strokeStyle = 'aqua';

context.stroke();

context.lineWidth = 4;

///Ring Right Half

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(387, 265);

ctx.bezierCurveTo(420, 290, 550, 390, 248, 348);

ctx.stroke();

context.strokeStyle = 'aqua';

context.stroke();

context.lineWidth = 4;

///Moon

context.beginPath();

context.moveTo(565, 380);

context.quadraticCurveTo(650, 470, 550, 560);

context.quadraticCurveTo(695, 485, 600, 407);

context.lineWidth = 10;

// line color

context.fillStyle = '#F7DC6F';

context.fill();

context.closePath();

//Astronaut

/// Head

var centerX = canvas.width / 1.4;

var centerY = canvas.height / 4.2;

var radius = 34;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = 'aqua';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'aqua';

context.stroke();

/// Body

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(543, 165);

ctx.bezierCurveTo(565, 300, 655, 300, 608, 165);

ctx.stroke();

context.strokeStyle = 'aqua';

context.stroke();

context.lineWidth = 5;

context.fillStyle = 'aqua';

context.fill();

///Left Arm

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(535, 165);

ctx.bezierCurveTo(520, 250, 548, 250, 546, 165);

ctx.stroke();

context.strokeStyle = 'aqua';

context.stroke();

context.lineWidth = 1;

context.fillStyle = 'aqua';

context.fill();

///Right Arm

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(597, 164);

ctx.bezierCurveTo(573, 250, 600, 250, 608, 164);

ctx.stroke();

context.strokeStyle = 'aqua';

context.stroke();

context.lineWidth = 1;

context.fillStyle = 'aqua';

context.fill();

///Left Leg

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(575, 250);

ctx.bezierCurveTo(550, 310, 575, 310, 590, 250);

ctx.stroke();

context.strokeStyle = 'aqua';

context.stroke();

context.lineWidth = 4;

context.fillStyle = 'aqua';

context.fill();

///Right Leg

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(605, 250);

ctx.bezierCurveTo(575, 325, 600, 325, 615, 250);

ctx.stroke();

context.strokeStyle = 'aqua';

context.stroke();

context.lineWidth = 4;

context.fillStyle = 'aqua';

context.fill();

///Right Arm Line

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(587, 200);

ctx.bezierCurveTo(573, 250, 600, 250, 608, 164);

ctx.stroke();

context.strokeStyle = '#27259B';

context.stroke();

context.lineWidth = 4;

context.fillStyle = 'aqua';

context.fill();

///Left Arm Line

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(533, 165);

ctx.bezierCurveTo(517, 250, 548, 250, 550, 200);

ctx.stroke();

context.strokeStyle = '#27259B';

context.stroke();

context.lineWidth = 4;

context.fillStyle = 'aqua';

context.fill();

///Left foot

var centerX = canvas.width / 1.42;

var centerY = canvas.height / 2.1;

var radius = 9;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#27259B';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'aqua';

context.stroke();

///Right foot

var centerX = canvas.width / 1.36;

var centerY = canvas.height / 2;

var radius = 9;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#27259B';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'aqua';

context.stroke();

/// Helmet Hole

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(550, 155);

ctx.bezierCurveTo(545, 110, 600, 110, 593, 155);

ctx.stroke();

context.strokeStyle = '#27259B';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#27259B';

context.fill();

//Helmet Highlight

var x = canvas.width /1.39;

var y = canvas.height / 4.35;

var radius = 15;

var startAngle = 1.6 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 2;

context.strokeStyle = "rgba(250,250,250,.9)";

context.stroke();

///Antenna

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(575, 106);

ctx.bezierCurveTo(588, 95, 580, 90, 575, 80);

ctx.stroke();

context.strokeStyle = '#27259B';

context.stroke();

context.lineWidth = 4;

///Jet Pack

context.beginPath();

context.rect(612,165,40,60);

context.closePath();

context.fillStyle = "aqua";

context.fill();

///Fire

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(626, 226);

ctx.bezierCurveTo(630, 300, 650, 325, 670, 350);

ctx.stroke();

context.strokeStyle = '#FF008F';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#FF008F';

context.fill();

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(650, 226);

ctx.bezierCurveTo(675, 300, 660, 325, 670, 350);

ctx.stroke();

context.strokeStyle = '#FF008F';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#FF008F';

context.fill();

///Fire 2

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(628, 226);

ctx.bezierCurveTo(632, 300, 652, 325, 663, 332);

ctx.stroke();

context.strokeStyle = '#F785AB ';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#F785AB ';

context.fill();

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(648, 226);

ctx.bezierCurveTo(673, 300, 658, 325, 663, 332);

ctx.stroke();

context.strokeStyle = '#F785AB ';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#F785AB ';

context.fill();

///Fire 3

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(632, 226);

ctx.bezierCurveTo(636, 300, 656, 325, 660, 321);

ctx.stroke();

context.strokeStyle = '#FBA155 ';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#FBA155 ';

context.fill();

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(645, 226);

ctx.bezierCurveTo(669, 300, 654, 325, 660, 322);

ctx.stroke();

context.strokeStyle = '#FBA155 ';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#FBA155 ';

context.fill();

///Fire Fill

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(632, 226);

ctx.bezierCurveTo(654, 334, 665, 344, 645, 226);

ctx.stroke();

context.strokeStyle = '#FBA155 ';

context.stroke();

context.lineWidth = 4;

context.fillStyle = '#FBA155 ';

context.fill();

///Badge

var centerX = canvas.width / 1.43;

var centerY = canvas.height / 3.4;

var radius = 4;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#E400FF ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#E400FF ';

context.stroke();

///Stars

//Star 1

context.beginPath();

context.moveTo(107, 170);

context.quadraticCurveTo(112,135,115,170);

context.quadraticCurveTo(145,162,119,178);

context.quadraticCurveTo(120,210,110,183);

context.quadraticCurveTo(90,205,105,178);

context.quadraticCurveTo(80,155,107,170);

var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);

grd.addColorStop(0, "rgb(257,125,9)");

grd.addColorStop(1, "rgb(255,203,59)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2.5;

context.strokeStyle = "lightsalmon";

context.stroke();

context.fillStyle = '#FFAFF1';

context.fill();

//Star 2

context.beginPath();

context.moveTo(157, 370);

context.quadraticCurveTo(162,335,170,370);

context.quadraticCurveTo(195,362,169,378);

context.quadraticCurveTo(170,410,160,383);

context.quadraticCurveTo(140,405,155,378);

context.quadraticCurveTo(130,355,157,370);

var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);

grd.addColorStop(0, "rgb(257,125,9)");

grd.addColorStop(1, "rgb(255,203,59)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2.5;

context.strokeStyle = "lightsalmon";

context.stroke();

context.fillStyle = '#FFAFF1';

context.fill();

//Star 3

context.beginPath();

context.moveTo(657, 90);

context.quadraticCurveTo(662,55,670,90);

context.quadraticCurveTo(695,82,669,98);

context.quadraticCurveTo(670,130,660,103);

context.quadraticCurveTo(640,125,655,98);

context.quadraticCurveTo(630,75,657,85);

var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);

grd.addColorStop(0, "rgb(257,125,9)");

grd.addColorStop(1, "rgb(255,203,59)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2.5;

context.strokeStyle = "lightsalmon";

context.stroke();

context.fillStyle = '#FFAFF1';

context.fill();

//Star 4

context.beginPath();

context.moveTo(757, 70);

context.quadraticCurveTo(762,35,770,70);

context.quadraticCurveTo(795,62,769,78);

context.quadraticCurveTo(770,110,760,83);

context.quadraticCurveTo(740,105,755,78);

context.quadraticCurveTo(730,55,757,70);

var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);

grd.addColorStop(0, "rgb(257,125,9)");

grd.addColorStop(1, "rgb(255,203,59)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2.5;

context.strokeStyle = "lightsalmon";

context.stroke();

context.fillStyle = '#FFAFF1';

context.fill();

//Star 5

context.beginPath();

context.moveTo(357, 80);

context.quadraticCurveTo(362,45,370,80);

context.quadraticCurveTo(395,72,369,88);

context.quadraticCurveTo(370,120,360,93);

context.quadraticCurveTo(340,115,355,88);

context.quadraticCurveTo(330,65,357,80);

var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);

grd.addColorStop(0, "rgb(257,125,9)");

grd.addColorStop(1, "rgb(255,203,59)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2.5;

context.strokeStyle = "lightsalmon";

context.stroke();

context.fillStyle = '#FFAFF1';

context.fill();

//Star 6

context.beginPath();

context.moveTo(457, 500);

context.quadraticCurveTo(462,465,475,500);

context.quadraticCurveTo(495,492,469,508);

context.quadraticCurveTo(470,540,460,513);

context.quadraticCurveTo(440,535,455,508);

context.quadraticCurveTo(430,485,457,500);

var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);

grd.addColorStop(0, "rgb(257,125,9)");

grd.addColorStop(1, "rgb(255,203,59)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2.5;

context.strokeStyle = "lightsalmon";

context.stroke();

context.fillStyle = '#FFAFF1';

context.fill();

/// Space Rock

var centerX = canvas.width / 1;

var centerY = canvas.height / 1.05;

var radius = 20;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#D9FDFF ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "#D9FDFF ";

context.stroke();

/// Space Rock 2

var centerX = canvas.width / 3;

var centerY = canvas.height / 1.3;

var radius = 18;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#D9FDFF ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "#D9FDFF ";

context.stroke();

/// Space Rock 3

var centerX = canvas.width / 10;

var centerY = canvas.height / 1.15;

var radius = 18;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#D9FDFF ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "#D9FDFF )";

context.stroke();

/// Space Rock 4

var centerX = canvas.width / 20;

var centerY = canvas.height / 11;

var radius = 20;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#D9FDFF ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "#D9FDFF ";

context.stroke();

/// Space Rock 5

var centerX = canvas.width / 6;

var centerY = canvas.height / 3;

var radius = 15;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#D9FDFF ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "#D9FDFF ";

context.stroke();

/// Space Rock 6

var centerX = canvas.width / 1.1;

var centerY = canvas.height / 1.5;

var radius = 18;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#D9FDFF ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "#D9FDFF ";

context.stroke();

/// Space Rock 6

var centerX = canvas.width / 1.13;

var centerY = canvas.height / 2.4;

var radius = 30;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#DAF0F1 ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "lightsalmon ";

context.stroke();

///Space Rock 7

var centerX = canvas.width / 2.1;

var centerY = canvas.height / 4;

var radius = 30;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#DAF0F1 ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "lightsalmon ";

context.stroke();

///Space Rock 8

var centerX = canvas.width / 7;

var centerY = canvas.height / 56;

var radius = 30;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#DAF0F1 ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "lightsalmon ";

context.stroke();

/// Space Rock 9

var centerX = canvas.width / 15;

var centerY = canvas.height / 1.7;

var radius = 30;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "#DAF0F1 ";

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = "lightsalmon ";

context.stroke();

/// Space Detail 1

var centerX = canvas.width / 2;

var centerY = canvas.height / 1.9;

var radius = 1;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 2;

var centerY = canvas.height / 1.8;

var radius = 2;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 1.5;

var centerY = canvas.height / 1.9;

var radius = 1;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 2;

var centerY = canvas.height / 1.54;

var radius = 2;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 2;

var centerY = canvas.height / 1.43;

var radius = 1;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 1.34;

var centerY = canvas.height / 1.6;

var radius = 2;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 1;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 1.7;

var centerY = canvas.height / 1.6;

var radius = 2;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 2.1;

var centerY = canvas.height / 1.2;

var radius = 1;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 2.2;

var centerY = canvas.height / 1.1;

var radius = 2;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 1.1;

var centerY = canvas.height / 2;

var radius = 1;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 2.7;

var centerY = canvas.height / 1.1;

var radius = 2;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 3;

var centerY = canvas.height / 1.2;

var radius = 1;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

var centerX = canvas.width / 3;

var centerY = canvas.height / 3.7;

var radius = 1;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#FFFB86 ';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#FFFB86 ';

context.stroke();

First Blog Best Blog

Search This Blog

Canvas Final

Comments

Post a Comment