Space Canvas Project


I loved doing this project! It was very time consuming, it took about 6 hours, but it taught me a lot and I did make a lot of mistakes along the way but even some of those mistakes led me to making this project. At first, I started out trying to make a coconut and then it ended up being yellow somehow and I decided to completely change my theme and do space! The most difficult part was figuring out how to do the stars, it took a very long time to do them but they really completed the piece and pulled it all together. The only thing I wish I did was use a bezier curve, I was unable to figure out how to do it so I had to do without, but I do think my project is overall very good.

CODE:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>


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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
   

//BACKGROUND COLOR
   
    var bkgdgrd =
    context.createLinearGradient(0,0,800,600);
    bkgdgrd.addColorStop(0, "purple");
    bkgdgrd.addColorStop(0.15, "black");
    bkgdgrd.addColorStop(0.25, "blue");
    bkgdgrd.addColorStop(0.35, "black");
    bkgdgrd.addColorStop(0.5,"purple");
    bkgdgrd.addColorStop(0.75, "black");
    bkgdgrd.addColorStop(1,"blue");
   
//BACKGROUND
   
    context.beginPath();
    context.rect(0,0,800,600);
    context.closePath();
    context.fillStyle = bkgdgrd;
    context.fill();
   
//SUN
   
    var sun1 =
    context.createRadialGradient(300,300,10,450,300,300);
    sun1.addColorStop(0, "orange");
    sun1.addColorStop(0.25, "orange");
    sun1.addColorStop(0.5, "orange");
    sun1.addColorStop(0.75, "yellow");
    sun1.addColorStop(1, "yellow");
   
//SUN
   
    context.beginPath();
    context.arc(400,300,250,0*Math.PI, 2*Math.PI, true);
    context.closePath
    context.fillStyle = sun1;
    context.fill();

//MOON
   
    var moon1 = context.createRadialGradient(300,300,20,300,300,300);
    moon1.addColorStop(0, "gray");
    moon1.addColorStop(0.5, "black");
    moon1.addColorStop(1, "gray");
   
//MOON
   
    context.beginPath();
    context.arc(300,300,150,0*Math.PI, 2*Math.PI, true);
    context.stroke();
    context.closePath();
    context.fillStyle = moon1;
    context.fill();
   
   
//MOON DIVIT 1
   
    context.beginPath();
    context.arc(250,300,10,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.9)";
    context.fill();
   
//MOON DIVIT 2
   
    context.beginPath();
    context.arc(350,250,15,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.5)";
    context.fill();
   
//MOON DIVIT 3
   
    context.beginPath();
    context.arc(300,200,10,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0)";
    context.fill();
   
//MOON DIVIT 4
   
    context.beginPath();
    context.arc(380,350,10,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.8)";
    context.fill();
   
//MOON DIVIT 5
   
    context.beginPath();
    context.arc(200,350,15,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.3)";
    context.fill();
   
//MOON DIVIT 6
   
    context.beginPath();
    context.arc(200,250,15,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.5)";
    context.fill();
   
//MOON DIVIT 7
   
    context.beginPath();
    context.arc(325,300,15,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.8)";
    context.fill();
   
//MOON DIVIT 8
   
    context.beginPath();
    context.arc(300,400,10,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0)";
    context.fill();

//MOON DIVIT 9
   
    context.beginPath();
    context.arc(275,350,15,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.4)";
    context.fill();
   
//MOON DIVIT 10
   
    context.beginPath();
    context.arc(264,245,10,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,0.3)";
    context.fill();
   
//MOON DIVIT 11
   
    context.beginPath();
    context.arc(410,300,10,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "rgba(37,29,29,1)";
    context.fill();
   
//STAR 1
   
    context.beginPath();
    context.arc(25,25,1.5,0*Math.PI, 2*Math.PI, true);
    context.stroke();
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 2
   
    context.beginPath();
    context.arc(25,100,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 3
   
    context.beginPath();
    context.arc(25,175,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 4
   
    context.beginPath();
    context.arc(25,250,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 5
   
    context.beginPath();
    context.arc(25,325,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 6   
   
    context.beginPath();
    context.arc(25,400,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 7
   
    context.beginPath();
    context.arc(25,475,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 8
   
    context.beginPath();
    context.arc(25,550,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 9
   
    context.beginPath();
    context.arc(25,625,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 10
   
    context.beginPath();
    context.arc(25,325,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 11
   
    context.beginPath();
    context.arc(100,50,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 12
   
    context.beginPath();
    context.arc(100,125,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 13
   
    context.beginPath();
    context.arc(100,200,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 14
   
    context.beginPath();
    context.arc(100,275,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 15
   
    context.beginPath();
    context.arc(100,350,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 16
   
    context.beginPath();
    context.arc(100,425,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 17
   
    context.beginPath();
    context.arc(100,500,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 18
   
    context.beginPath();
    context.arc(100,575,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 19
   
    context.beginPath();
    context.arc(60,75,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 20
   
    context.beginPath();
    context.arc(60,225,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 21
   
    context.beginPath();
    context.arc(60,375,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 22
   
    context.beginPath();
    context.arc(60,525,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 23
   
    context.beginPath();
    context.arc(175,25,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 24
   
    context.beginPath();
    context.arc(175,100,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 25
   
    context.beginPath();
    context.arc(175,175,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 26
   
    context.beginPath();
    context.arc(175,450,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 27
   
    context.beginPath();
    context.arc(175,525,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 28
   
    context.beginPath();
    context.arc(140,75,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 29
   
    context.beginPath();
    context.arc(140,225,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 30
   
    context.beginPath();
    context.arc(140,375,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 31
   
    context.beginPath();
    context.arc(140,550,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 32
   
    context.beginPath();
    context.arc(250,25,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 33
   
    context.beginPath();
    context.arc(250,575,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 34
   
    context.beginPath();
    context.arc(225,75,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 35
   
    context.beginPath();
    context.arc(215,560,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 36
   
    context.beginPath();
    context.arc(225,520,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 37
   
    context.beginPath();
    context.arc(300,50,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 38
   
    context.beginPath();
    context.arc(300,550,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 39
   
    context.beginPath();
    context.arc(375,25,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 40
   
    context.beginPath();
    context.arc(375,575,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 41
   
    context.beginPath();
    context.arc(450,40,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 42
   
    context.beginPath();
    context.arc(450,555,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 43
   
    context.beginPath();
    context.arc(525,25,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 44
   
    context.beginPath();
    context.arc(525,550,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 45
   
    context.beginPath();
    context.arc(580,50,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 46
   
    context.beginPath();
    context.arc(580,520,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 47
   
    context.beginPath();
    context.arc(580,575,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 48
   
    context.beginPath();
    context.arc(625,25,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 49
   
    context.beginPath();
    context.arc(625,100,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 50
   
    context.beginPath();
    context.arc(625,175,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 51
   
    context.beginPath();
    context.arc(625,475,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 52
   
    context.beginPath();
    context.arc(625,550,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 53
   
    context.beginPath();
    context.arc(700,50,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 54
   
    context.beginPath();
    context.arc(700,125,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();

//STAR 55
   
    context.beginPath();
    context.arc(700,200,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 56
   
    context.beginPath();
    context.arc(700,275,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 57
   
    context.beginPath();
    context.arc(700,350,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 58
   
    context.beginPath();
    context.arc(700,425,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 59
   
    context.beginPath();
    context.arc(700,500,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();

//STAR 60
   
    context.beginPath();
    context.arc(700,575,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 61
   
    context.beginPath();
    context.arc(660,75,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 62
   
    context.beginPath();
    context.arc(660,225,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 63
   
    context.beginPath();
    context.arc(660,375,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 64
   
    context.beginPath();
    context.arc(660,525,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 65
   
    context.beginPath();
    context.arc(765,25,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 66
   
    context.beginPath();
    context.arc(765,100,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 67
   
    context.beginPath();
    context.arc(765,175,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 68
   
    context.beginPath();
    context.arc(765,250,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 70
   
    context.beginPath();
    context.arc(765,325,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 71
   
    context.beginPath();
    context.arc(765,400,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 72
   
    context.beginPath();
    context.arc(765,475,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   
//STAR 73
   
    context.beginPath();
    context.arc(765,550,1.5,0*Math.PI, 2*Math.PI, true);
    context.closePath();
    context.fillStyle = "white";
    context.fill();
   






//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(255,255,255,1)";
context.fillText('JORDAN LEDYARD ART 210, FA 17 - CANVAS PROJECT', 20, 580);
context.closePath();

    </script>


</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Jack Skellington Calligram

Image
This project was the most time-consuming and difficult thus far, I had a lot of troubles and had to overcome many roadblocks but overall I am very proud of my final product. I put about 12-13 hours of work into this calligram and of course my inspiration was my favorite movie, a Nightmare Before Christmas and also because it's Halloween!
Read more

Somewhere

Image
I liked this project but it took a lot of tries to find a good match with the lighting because I was unsure how to change the lighting of just one layer and not the other. I tried to put myself in the full house family, on the cover of frozen, at the table in mean girls, and I even made another copy of myself at whistler but standing on my board. Overall I am proud of my final product at the top of whistler in Canada because this is somewhere I really want to go and I actually see myself being and placing myself here using photoshop makes me want to take this picture there. The hardest part was finding the right match to work with but once I found a good match it was smooth sailing. This project took me about 2 1/2 hours to complete but I personally think it ended up working really well besides the minor focus issues that I had with the stone next to me.
Read more