Canvas Project With Code

"Motocross"
Code

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

var centerX = canvas.width / 3;

var centerY = canvas.height / 3;

var radius = 250;

var startangle = 0;

var endangle = 2 * Math.PI;


context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.strokeStyle = "black";

context.stroke();

context.fillStyle = "rgba(0,9,239,0.70)"

context.fill();

//inside helmet

context.beginPath();

context.rect(130,60,80,250);

context.fillStyle = "#000000";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#000000"

context.stroke();


///inside helmet

context.beginPath(); 

context.moveTo(175,300); 

context.lineTo(200, 398); 

context.lineTo(350,200); 

context.closePath();

context.lineWidth = 7; 

context.lineJoin = "round";

context.strokeStyle = "#000000"; 

context.stroke();

context.fillStyle = "#F800BB"

context.fill();

///inside helmet

context.beginPath(); 

context.moveTo(195,200); 

context.lineTo(70, 150); 

context.lineTo(354,101); 

context.closePath();

context.lineWidth = 7; 

context.lineJoin = "round";

context.strokeStyle = "#000000"; 

context.stroke();

context.fillStyle = "#F800BB"

context.fill();

//inside helmet

context.beginPath();

context.rect(130,60,80,250);

context.fillStyle = "#000000";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#000000"

context.stroke();


///inside helmet

context.beginPath(); 

context.moveTo(145,80); 

context.lineTo(90, 150); 

context.lineTo(354,101); 

context.closePath();

context.lineWidth = 7; 

context.lineJoin = "round";

context.strokeStyle = "#0A0A0A"; 

context.stroke();

context.fillStyle = "#F800BB"

context.fill();

///inside helmet

context.beginPath(); 

context.moveTo(295,290); 

context.lineTo(360, 250); 

context.lineTo(254,201); 

context.closePath();

context.lineWidth = 7; 

context.lineJoin = "round";

context.strokeStyle = "#000000"; 

context.stroke();

context.fillStyle = "#F800BB"

context.fill();

///inside helmet

context.beginPath();

context.rect(190,150,58,250);

context.fillStyle = "grey";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#000000"

context.stroke();

//MOTORCYCLE JUMP/TRIANGLE

context.beginPath(); 

context.moveTo(175,500); 

context.lineTo(600, 498); 

context.lineTo(600,200); 

context.closePath();

context.lineWidth = 7; 

context.lineJoin = "round";

context.strokeStyle = "#5B2D0C"; 

context.stroke();

context.fillStyle = "#5B2D0C"

context.fill();

    


/// BACK OF HELMET #1

context.beginPath();

context.moveTo(200,30)

context.bezierCurveTo(-7,100,10,200,100,302)

context.lineWidth = 5;

context.strokeStyle = "#F800BB"

context.fillStyle = "grey"

context.fill();

context.stroke();


///BACK OF HELMET #2

context.beginPath();

context.moveTo(100,300)

context.quadraticCurveTo(150,300,130,400)

context.lineWidth = 5;

context.stroke();


///THIRD PART OF HELMET

context.beginPath();

context.moveTo(200,30)

context.bezierCurveTo(510,21,340,40,335,71)

context.lineWidth = 5;

context.strokeStyle = "#F800BB"

context.fillStyle = "grey"

context.fill();

context.stroke();


///EYE HOLE

context.beginPath();

context.moveTo(335,70)

context.bezierCurveTo(353,90,355,103,355,112)

context.lineWidth = 5;

context.strokeStyle = "#F800BB"

context.stroke();


///EYES HOLE PART TWO

context.beginPath();

context.moveTo(355,110)

context.quadraticCurveTo(285,120,315,176)

context.lineWidth = 5;

context.strokeStyle = "#F800BB"

context.fillStyle = 

context.fill();

context.stroke();

///GOGGLES

context.moveTo(355,110);

context.lineTo(355,200)

context.lineWidth = 5,

context.strokeStyle =

context.fillStyle = "#000000"

context.fill();

context.stroke();

///EYES HOLE THREE

context.beginPath();

context.moveTo(315,175)

context.quadraticCurveTo(315,180,355,201)

context.lineWidth = 5;

context.fillStyle = "grey"

context.fill();

context.stroke();


///NOSE

context.beginPath();

context.moveTo(355,200)

context.quadraticCurveTo(355,200,370,222)

context.lineWidth = 5;

context.strokeStyle = "#F800BB"

context.fillStyle = "grey"

context.fill();

context.stroke();



/// VERY BOTTOM OF HELMET

context.beginPath();

context.moveTo(370,220)

context.bezierCurveTo(370,335,350,290,300,300)

context.lineWidth = 5;

context.strokeStyle = "#F800BB"

context.fillStyle = "black"

context.fill();

context.stroke();

/// FRONT OF NECK

context.beginPath();

context.moveTo(300,300)

context.quadraticCurveTo(250,306,250,400)

context.lineWidth = 5;

context.strokeStyle = "#F800BB"

context.stroke();

///BOTTOM OF NECK

context.moveTo(250,400);

context.lineTo(130,400)

context.lineWidth = 5,

context.stroke();

///SUN

var centerX = canvas.width / 500;

var centerY = canvas.height / 500;

var radius = 70;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 5;

context.strokeStyle = "#F29F00";

context.fillStyle = "#F9F40B"

context.fill();

context.stroke();

///SUN BEAMS

context.moveTo(45,50);

context.lineTo(100,110)

context.lineWidth = 10,

context.fillStyle = "f9f40b"

context.fill();

context.stroke();

//ANOTHER ONE

context.moveTo(20,65);

context.lineTo(40,150)

context.lineWidth = 10,

context.fillStyle = "f9f40b"

context.fill();

context.stroke();


////AND ANOTHER SUN LINE

context.moveTo(2,69);

context.lineTo(10,160)

context.lineWidth = 10,

context.fillStyle = "f9f40b"

context.fill();

context.stroke();

///SUN BEAM

context.moveTo(-10,30);

context.lineTo(150,80)

context.lineWidth = 10,

context.fillStyle = "f9f40b"

context.fill();

context.stroke();

///SUN BEAM

context.moveTo(70,20);

context.lineTo(190,50)

context.lineWidth = 10,

context.fillStyle = "f9f40b"

context.fill();

context.stroke();

///SUN

var centerX = canvas.width / 500;

var centerY = canvas.height / 500;

var radius = 70;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 5;

context.strokeStyle = "#F29F00";

context.fillStyle = "#F9F40B"

context.fill();

context.stroke();



///rest of ramp

context.beginPath();

context.rect(600,200,200,350);

context.fillStyle = "#5B2D0C";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#5B2D0C"

context.stroke();



///GRASS

context.beginPath();

context.rect(0,500,850,650);

context.fillStyle = "#00A037";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#5B2D0C"

context.stroke();


 

Comments

Post a Comment

Popular posts from this blog

Somewhere

Image
 For this project I decided to put myself somewhere I have never been. I chose to place myself next to Sommer Ray. I decided to place myself in this image because Sommer Rae is my favorite instagram model. I ended up using a photo from her new work out line. I wanted to use this specific photo for my art because it had a space where I could place myself without distorting the rest of the image. The colors in the image also pop out and grab the audiences attention. My original photo of myself was this. This is where I encountered my first problem. The lighting in my photo was completely different than the photo I was editing myself into. I created a new adjustment layer and played around with the contrast and lighting until I made it look the same. This is my final Image. I decided to match the setting by dressing in a gym outfit. I had to increase the art-board size a few inches taller in order to fit my self into the image. I used the cloning tool to fill in the rest of the background
Read more

Autoscopy

Image
      For my Autoscopy I chose to use this photo of my self. I knew I wanted to create an autoscopy with an outer space vibe, so I chose a photo of me at night. This photo is relatively old and is from my first college I attended.      The project took me around 3 hours to make. I struggled mostly with the adjustment layers. It took me a while to figure out how to select which layer I wanted to adjust by its  self. The first photo I added to my art was a planet.      I chose this photo because I really liked the colors of the planet, and I thought it would match nicely with the skyline. I used some other images as well to create my final  autoscopy. My personal favorite was the bear. The bear is symbolic for being brave. I edited the color of the bear to blue, so it would fit better in my autoscopy.     I added a tattoo to my arm as well. I have always wanted a tattoo on my arm, but my mother would kill me if that ever happened. The rose is symbolic as well. It stands for love. I belie
Read more

PS H2 Inspirational Photos

Image
I would like to recreate this illusion. I think it's a very cool concept. I like how real the image looks, even though it is made with toy cars. I have a camera so this would be easy for me to recreate. This photo set made me laugh. First of all the girl looks hilarious with her eyes open. I think its funny, how the editor put a hand over the girls face to fix what was going on. it would be slightly difficult to put the hand over the face. I think this image is very comical. The photoshopping does not look very hard to do either. I like how his phone is getting thrown out of his hand into the water. I feel like he should have added a higher quality image of himself to match the other Man in the photo. I think this Image would be very hard to photoshop myself into. It would be hard to replicate the pulling of the skin on the face. The shadows in the back would also be very hard to recreate.
Read more