Dreamweaver Final "Mooninte" scene from Aqua Teen Hunger Force recreated

 Top: my recreation of screenshot from Aqua Teen Hunger Force
Bottom:original screenshot of "mooninite" scene in Aqua Teen Hunger Force

context.beginPath();
 // background "space"
 var snaildown = context.createLinearGradient(500,100,250,700,200,400);


snaildown.addColorStop(0,"rgb(10,10,10)");

snaildown.addColorStop(0.20,"rgb(16,17,18)");

snaildown.addColorStop(0.40,"rgb(38,40,41)");

snaildown.addColorStop(0.60,"rgb(65,68,69)");

snaildown.addColorStop(0.80,"rgb(40,45,46)");

snaildown.addColorStop(1,"rgb(22,25,26)");

context.closePath();


context.beginPath();

context.rect(0,0, canvas.width, canvas.height);

context.fillStyle=snaildown;

context.fill();

context.closePath();

 //earth_01 blue


 context.beginPath();

 context.moveTo(475,00);
 context.quadraticCurveTo(490,450,800,500);
 context.lineTo(800,0);
 context.lineTo(500,0);
 context.fillStyle="rgb(127,185,250)";
 context.fill();
 context.stroke();

 context.closePath();

// earth contintents
context.beginPath();

context.moveTo(550,0)
context.bezierCurveTo(525,100,500,150,550,175);
context.bezierCurveTo(575,200,560,285,585,325);
context.bezierCurveTo(575,250,600,350,600,225);
context.bezierCurveTo(600,175,650,175,700,225);
context.bezierCurveTo(700,200,750,360,800,300);
context.lineTo(800,0)
context.lineTo(550,0)
context.fillStyle='green';
context.fill();

context.stroke();

//pond/sea
context.closePath();

context.beginPath();
context.moveTo(800,100);
context.quadraticCurveTo(650,125,800,150);
context.lineTo(800,100);
context.fillStyle='rgb(127,185,250)';
context.fill();
context.stroke();

context.closePath();




//spaceship interior purple border
 context.beginPath();
 context.moveTo(775,500);
 context.lineTo(775,50);
 context.lineTo(175,50);
 context.lineTo(175,550);
 context.lineTo(250,625);
 context.lineTo(0,625);
 context.lineTo(0,0);
 context.lineTo(810,0);
 context.lineTo(810,600);
 context.lineTo(775,550);

 context.fillStyle="rgb(178,15,242)";
 context.fill();
 context.stroke();

 context.closePath();

 //spaceship interior steel beam
context.beginPath();
context.moveTo(775,550);
context.lineTo(175,550);
context.lineTo(250,625);
context.lineTo(810,600);
context.lineTo(775,550);

context.fillStyle="grey";
context.fill();
context.stroke();

context.closePath();

// black dots/holes in steel beam

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.15;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2.7;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3.1;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

 var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3.6;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.95;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.79;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.65;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.53;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.43;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.34;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.26;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.19;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.13;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 1.07;
var centerY = canvas.height / 1.04;
var radius = 10;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='black';
context.fill();
context.stroke();

context.closePath();

//mooninite body

context.beginPath();

context.moveTo(100,575);
context.lineTo(100,425);
context.lineTo(125,425);
context.lineTo(125,325);
context.lineTo(115,325);
context.lineTo(115,275);
context.lineTo(150,275);
context.lineTo(150,225);
context.lineTo(225,225);
context.lineTo(225,250);
context.lineTo(250,250);
context.lineTo(250,300);
context.lineTo(275,300);
context.lineTo(275,275);
context.lineTo(325,275);
context.lineTo(325,225);
context.lineTo(375,225);
context.lineTo(375,425);
context.lineTo(400,425);
context.lineTo(400,575);
context.lineTo(100,575);

context.fillStyle='rgb(74,255,3)';
context.fill();

context.stroke();

context.closePath();

// left arm
context.beginPath();
context.moveTo(100,425);
context.lineTo(75,425);
context.lineTo(75,450);
context.lineTo(50,450);
context.lineTo(50,475);
context.lineTo(25,475);
context.lineTo(25,525);
context.lineTo(50,525);
context.lineTo(50,475);
context.lineTo(75,475);
context.lineTo(75,450);
context.lineTo(100,450);
context.lineTo(100,425);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//right arm

context.beginPath();
context.moveTo(400,425);
context.lineTo(475,425);
context.lineTo(475,350);
context.lineTo(450,350);
context.lineTo(450,325);
context.lineTo(475,325);
context.lineTo(475,250);
context.lineTo(500,250);
context.lineTo(500,325);
context.lineTo(525,325);
context.lineTo(525,350);
context.lineTo(500,350);
context.lineTo(500,450);
context.lineTo(400,450);
context.lineTo(400,425);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//left foot

context.beginPath();
context.moveTo(200,575);
context.lineTo(200,590);
context.lineTo(125,590);
context.lineTo(125,625);
context.lineTo(225,625);
context.lineTo(225,575);
context.lineTo(200,575);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

// right foot
context.beginPath();
context.moveTo(300,575);
context.lineTo(300,590);
context.lineTo(375,590);
context.lineTo(375,625);
context.lineTo(275,625);
context.lineTo(275,575);
context.lineTo(300,575);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//// mouth
context.beginPath();
context.moveTo(175,425);
context.lineTo(325,425);
context.lineTo(325,450);
context.lineTo(175,450);
context.lineTo(175,450);

context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//left eye
context.beginPath();
context.moveTo(175,350);
context.lineTo(225,350);
context.lineTo(225,375);
context.lineTo(175,375);
context.lineTo(175,350);

context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();

//right eye
context.beginPath();
context.moveTo(275,350);
context.lineTo(325,350);
context.lineTo(325,375);
context.lineTo(275,375);
context.lineTo(275,350);

context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();



//left eye brow
context.beginPath();
context.moveTo(137.5,362.5);
context.lineTo(137.5,350);
context.lineTo(150,350);
context.lineTo(150,337.5);
context.lineTo(162.5,337.5);
context.lineTo(162.5,325);
context.lineTo(175,325);
context.lineTo(175,312.5);
context.lineTo(187.5,312.5);
context.lineTo(187.5,325);
context.lineTo(175,325);
context.lineTo(175,337.5);
context.lineTo(162.5,337.5);
context.lineTo(162.5,350);
context.lineTo(150,350);
context.lineTo(150,362.5);
context.lineTo(137.5,362.5);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();


//right eye brow
context.beginPath();
context.moveTo(362.5,362.5);
context.lineTo(362.5,350);
context.lineTo(350,350);
context.lineTo(350,337.5);
context.lineTo(337.5,337.5);
context.lineTo(337.5,325);
context.lineTo(325,325);
context.lineTo(325,312.5);
context.lineTo(312.5,312.5);
context.lineTo(312.5,325);
context.lineTo(325,325);
context.lineTo(325,337.5);
context.lineTo(337.5,337.5);
context.lineTo(337.5,350);
context.lineTo(350,350);
context.lineTo(350,362.5);
context.lineTo(362.5,362.5);
context.fillStyle="rgb(33,6,189)";
context.fill();
context.stroke();

context.closePath();


var text                 = "I hope you can see this, I'm doing it as hard as I can";

/// font style= bold, normal, italic
/// size is always in pixels 10px
/// font family: any universal font

context.beginPath();
context.font             = 'normal 35px Impact';
context.fillStyle         = 'white';
context.fillText(text, 25, canvas.height -450); // change
context.closePath();