Canvas Project

     





At first I decided to do my project on pac man but then decided to make it on a house I found on the Internet. I spent nearly 7 hours total on this project and the most challenging part was figuring out how to make the door and the lines on the roof. This is my first time ever doing coding and honestly probably the most challenging assignment I have ever done.

    I look forward to seeing everyone else's work in the class so I can soak in as much knowledge on how to become better using adobe dreamweaver, especially when it comes to arcs. As challenging as this assignment was for me, at least I got through it and have something to show for. 




Inspiration:


167,273 House drawing Vector Images, House drawing Illustrations | Depositphotos


Code:

//Rectangle 3


var x=340;

var y=110;

var width = 50

var height= 100;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 4;

context.fillStyle = 'rgba(248,248,248,1.00)';

context.strokeStyle = 'rgba(10,9,9,1.00)';

context.fill();

context.stroke();

//left TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(420,72); // point A coordinates

context.lineTo(550, 300); // point B coords

context.lineTo(300,300); // point C coords


context.fillStyle = "rgba(244,3,7,1.00)";

context.fill();

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(9,9,9,1.00)"; // Reb Green Blue Alpha

context.stroke();

 //Rectangle


var x=300;

var y=300;

var width = 250

var height= 250;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(255,198,7,1.00)';

context.strokeStyle = 'rgba(7,7,7,1.00)';

context.fill();

context.stroke();


var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


//Rectangle 2


var x=300;

var y=300;

var width = 250

var height= 250;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(255,198,7,1.00)';

context.strokeStyle = 'rgba(7,7,7,1.00)';

context.fill();

context.stroke();


var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;


//Rectangle 4


var x=340;

var y=400;

var width = 60

var height= 60;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(0,255,222,1.00)';

context.strokeStyle = 'rgba(7,7,7,1.00)';

context.fill();

context.stroke();


//Rectangle 5


var x=0;

var y=400;

var width = 300

var height= 230;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(0,255,113,1.00)';

context.strokeStyle = 'rgba(7,7,7,1.00)';

context.fill();

context.stroke();

//Rectangle 6


var x=300;

var y=550;

var width = 300

var height= 230;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(0,255,113,1.00)';

context.strokeStyle = 'rgba(7,7,7,1.00)';

context.fill();

context.stroke();

//Rectangle 7


var x=550;

var y=400;

var width = 300

var height= 230;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(0,255,113,1.00)';

context.strokeStyle = 'rgba(7,7,7,1.00)';

context.fill();

context.stroke();

//Simple lines


context.moveTo(370,405); // COORDINATES OF STARTING POINT

context.lineTo(370,455); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE


//Simple lines 2


context.moveTo(340,430); // COORDINATES OF STARTING POINT

context.lineTo(400,430); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE


//Simple lines 3


context.moveTo(440,140); // COORDINATES OF STARTING POINT

context.lineTo(370,200); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE


//Simple lines 4


context.moveTo(445,170); // COORDINATES OF STARTING POINT

context.lineTo(390,215); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE


 //Simple lines 5


context.moveTo(435,205); // COORDINATES OF STARTING POINT

context.lineTo(410,230); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE




//Door

 // starting point coordinates

var x = 440;

var y = 545;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1.7 - 1;

var cpointY = canvas.height / 2 -1;


// ending point coordinates

var x1 = 540;

var y1 = 545;


context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.fillStyle = 'rgba(228,129,11,1.00)';

context.lineWidth = 3;

context.strokeStyle = "rgba(12,12,13,1.00)";

context.fill();

context.stroke();

 


////circle 1 square bottom left on rectangle to the right

 

  var centerX = canvas.width /1.72

        var centerY = canvas.height / 1.2;

        var radius = 2;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

   

        context.lineWidth = 5;

        context.strokeStyle = "black";

context.fillStyle = 'rgba(7,7,7,1.00)';

context.fill();

        context.stroke();

 



Comments

Post a Comment

Popular posts from this blog

Logo

Image
       For my Logo Project I decided to incorporate all of the things that describe who my character is in one image. I choose three key things that I love including a basketball, a hat, and Tampa Bay because that is where I am from and makes me who I am today. I have always been an athlete who loves to compete in everything I do. I enjoyed this assignment and playing around with all of the different tools on the software. The hardest part for me in this assignment was making the arcs in the basketball, but I think it turned out okay. Making this was one of my favorite assignments we have had thus far in the semester. 
Read more

Business Cards

Image
 Final Image: At first I was really nervous about making this but after watching one 20 minute youtube video on InDesign it started to come together for me. This is something that is very useful information to know because one day I plan on making my own business cards. The hardest part for me was trying to figure out how to change the brush so I could incorporate my tag brush. Other than that I think they turned out pretty decent.
Read more

Autoscopy

Image
 Final Image: I had really fun with this project once I finally got started. Just like everything else in this class it was very time consuming and required a lot of time on youtube watching videos. But I am pleased with how it came out. The idea is me placed in the woods at nighttime and I am supposed to be a wolf with an evil eye. It took me over 5 hours in all to complete this, but I learned a lot, especially with using different layers. Overall, I think I did a pretty good job.   Other Images:  
Read more