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

Business Cards

Image
 When creating my business cards, I wanted to keep them very simple. If a business card is not simple it becomes distracting. I created the sketches for my business cards, before I even knew what the guidelines were for the project. That is why my sketches slightly differ from my final product. The project took me around 3 hours to do. The only problem I encountered was getting used to the new software. I have never used In Design before this. My business cards have a central theme that is supported by a logo and matching background colors. I want the audience to perceive my work as simple yet purposeful. Below are the business cards:
Read more

Merging Two Photos

Image
 This project took me around 30 minutes. The hardest part was figuring out what I wanted to create. The first Image I started with was earth. I chose this photograph because I wanted to create something out of this world. I then had the idea to make a giraffe so tall its head would be in space. I had to lasso the giraffe's head out of the original image. This took me some time because I wanted there to be no extra sky on the outline of the animal. I was going for a funny approach on this piece. I really want the audience to perceive this work as a joke and not seriously. The final Image is below.
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