Bryan's Canvas Blog







My project was just a mixture of simple shapes banded together to create a picture. This project was create on Dreamweaver in HTML format. The shapes used in my project are Circles, Semi-circles, Squares, Rectangles, Triangles, Quadratic curve, and Bezier curve. As you can see I don't have a specific animal or person create from these shapes it just a picture. This is because I wanted to keep the picture looking clean and sleek. I didn't want to add a bunch of shapes to make it look like a person or animal because i felt it would have been too complicated and would have a lot of problems to deal with. On the right is the original picture and on the left is my version of it. 


I was quite nervous when I found out what the project would be. I didn't know how I was going to finish the project. I started off with a different design and I was completely lost. But after thinking about it for a while I decided to change my project to something that was going to be easier for my skill level of code. Once I changed my project, everything clicked. It was so much easier and I was able to complete it within 6 to 8 hours. I am happy with how it came out and I think it looks pretty similar to the original.  






CODE:


/////Biggest triangle middle to top right....yellow
context.beginPath(); // begin a shape
 
context.moveTo(0,670); // point A coordinates
context.lineTo(590, 0); // point B coords
context.lineTo(700,775); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(123,9,9,1.00)";
context.fill();
///Square bottom right

var x=300;
var y=699;
var width = 300
var height= 200;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(106,105,105,1.00)';
context.fill();
/////Square

var x=210;
var y=0;
var width = 250
var height= 150;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(86,0,255,1.00)';

context.fill();


////Circle top left 
context.beginPath();
context.arc(150, 100, 120, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(112,112,112,1.00)' ;
context.fill();
context.lineWidth =10;
////Circle top middle  
context.beginPath();
context.arc(525, 100, 120, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,127,167,1.00)' ;
context.fill();
context.lineWidth =10;




//top left arc
var centerX = 10;
        var centerY = 0
        var radius = 90;
        var startangle = 0* Math.PI;;
        var endangle =  1* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "rgba(215,255,0,1.00)";
context.fill();
      context.lineWidth = 5;
///Line top left to top right
context.beginPath()
context.moveTo(0,150); // COORDINATES OF STARTING POINT
    context.lineTo(800,0); // COORDS OF POINT 2
    context.lineWidth = 5; // STROKE WIDTH
    context.stroke(); // STROKE
///Square top left

var x=0;
var y=80;
var width = 90
var height= 90;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(20,0,255,1.00)';
context.fill();
// TRIANGLE top left
context.beginPath(); // begin a shape
 
context.moveTo(0,150); // point A coordinates
context.lineTo(550, 48); // point B coords
context.lineTo(200,485); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(125,125,129,1.00)";
context.fill();
/////Trangle mid left ,,,red
context.beginPath(); // begin a shape
 
context.moveTo(0,150); // point A coordinates
context.lineTo(0, 485); // point B coords
context.lineTo(200,485); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(255,0,29,1.00)";
context.fill();
//Blue Circle under grey traingle
context.beginPath();
context.arc(330, 310, 80, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(2,2,253,1.00)' ;
context.fill();
context.lineWidth =5;
context.strokeStyle = 'rgba(0,0,0,1.00)';
context.stroke();
/////Small grey triangle underneath green triangle 

context.beginPath(); // begin a shape
 
context.moveTo(0,695); // point A coordinates
context.lineTo(100, 485); // point B coords
context.lineTo(200,735); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(157,157,157,1.00)";
context.fill();
////Green triangle under black circle
context.beginPath(); // begin a shape
 
context.moveTo(0,485); // point A coordinates
context.lineTo(0, 685); // point B coords
context.lineTo(500,485); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(0,255,190,1.00)";
context.fill();
///Black circle under grey traiangle
context.beginPath();
context.arc(210, 480, 145, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(0,0,0,1.00)' ;
context.fill();
////Orange circle under green triangle
context.beginPath();
context.arc(50, 700, 75, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,60,0,1.00)' ;
context.fill();
/////Rectangle bottom left
var x=0;
var y=698;
var width = 330
var height= 200;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
context.fillStyle = 'rgba(143,0,194,1.00)';
context.fill();

///Square top right

var x=580;
var y=0;
var width = 300
var height= 300;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(34,34,34,1.00)';
context.fill();
///Square middle right

var x=580;
var y=100;
var width = 300
var height= 500;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(0,140,255,1.00)';
context.fill();
///Square bottom right

var x=580;
var y=600;
var width = 300
var height= 500;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(255,69,69,1.00)';
context.fill();
        
//Grey Circle on right side
context.beginPath();
context.arc(520, 570, 80, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(93,93,93,1.00)' ;
context.fill();
context.lineWidth =5;
///Big grey circle on right side 
context.beginPath();
context.arc(790, 480, 145, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(93,93,93,1.00)' ;
context.fill();
////Green triangle under black circle
context.beginPath(); // begin a shape
 
context.moveTo(800,495); // point A coordinates
context.lineTo(800, 380); // point B coords
context.lineTo(500,485); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(197,0,0,1.00)";
context.fill();
///Big grey circle bottom middle 
context.beginPath();
context.arc(330, 820, 100, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(51,218,29,1.00)' ;
context.fill();

///Line top left to top right
context.beginPath()
context.moveTo(0,150); // COORDINATES OF STARTING POINT
    context.lineTo(800,0); // COORDS OF POINT 2
    context.lineWidth = 5; // STROKE WIDTH
    context.stroke(); // STROKE
///Line bottom left to middle right
context.beginPath()
context.moveTo(0,700); // COORDINATES OF STARTING POINT
    context.lineTo(800,600); // COORDS OF POINT 2
    context.lineWidth = 5; // STROKE WIDTH
    context.stroke(); // STROKE
///Line top left to middle bottom
context.beginPath()
context.moveTo(0,150); // COORDINATES OF STARTING POINT
    context.lineTo(380,800); // COORDS OF POINT 2
    context.lineWidth = 5; // STROKE WIDTH
    context.stroke(); // STROKE
///Line top right to bottom left
context.beginPath()
context.moveTo(800,0); // COORDINATES OF STARTING POINT
    context.lineTo(0,700); // COORDS OF POINT 2
    context.lineWidth = 5; // STROKE WIDTH
    context.stroke(); // STROKE
///Line top right to bottom right
context.beginPath()
context.moveTo(580,0); // COORDINATES OF STARTING POINT
    context.lineTo(580,800); // COORDS OF POINT 2
    context.lineWidth = 5; // STROKE WIDTH
    context.stroke(); // STROKE
///Line bottom left to bottom right
context.beginPath()
context.moveTo(0,700); // COORDINATES OF STARTING POINT
    context.lineTo(800,700); // COORDS OF POINT 2
    context.lineWidth = 5; // STROKE WIDTH
    context.stroke(); // STROKE





//Quad curve 
// starting point coordinates
var x = 0;
var y = 300;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 225;
var cpointY = canvas.height / 2 - 420;

// ending point coordinates
var x1 = 800;
var y1 = 150;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;
context.strokeStyle = "rgba(255,0,231,1.00)";
context.stroke();
/////Bezier curve
// starting point coordinates
var x = 0;
var y = 300;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 500;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 300; 

// ending point coordinates 
var x1 = 800;
var y1 = 150;


context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 6;
context.strokeStyle = "rgb(0,0,255)";
context.lineCap = 'round' 
context.stroke();
 

 


























Comments

Post a Comment

Popular posts from this blog

Logo

Image
          The reason I decided to make this logo is because I am aspiring to become a doctor. It has been a life long dream of mine to help save lives. One of the best ways to do that is to become a doctor. It takes years of hard work, dedication, and drive to become a doctor. Its a grueling and painful process but in the end it will pay off. My mother is a doctor and has been a huge inspiration in why I would like to become one. We often follow in our parents footsteps and I am quite proud to follow in my mothers. My logo is an object often used in the medical field known as a stethoscope. It is what doctors use to hear the heartbeat of a patient. I blend in the initial of my first name in this logo to make it more personalized. All in all this logo means a lot to me and is something that I strive to become and something I am working to become. 
Read more

Self Portrait Poster

Image
         On the left you can see the image that was used to be the nucleus of my poster. My posters slogan is "Color is all about perspective". This ties into my life because I am color blind. All my life I thought I saw the world how everyone else does, I had no idea I saw "differently" than most people. I started to notice I see things differently when I was in about 5th grade. People would call out colors they saw on the teachers screen and I just didn't see the same color. I found out that I was color blind when I did a color blind test with my family. We sat down and did it and I couldn't see the numbers (your supposed to be able to see a certain number to pass the color blind tests). My mother had told me that my Grandpa was color blind and it was a hereditary trait. My brother is also color blind. Color really is all about perspective. We all see different shades or even colors, our eyes all work differently. No ones eyes are the same and I think that
Read more

Somewhere

Image
          This is the finished product for my Somewhere project. Overall this was my favorite project of this class. The objective was to place ourselves in and environment next to a celebrity, athlete, or in a movie. This project too me about 6-8 hours to complete but I enjoyed doing it. Like I said this was my favorite project because I got to place myself doing a jersey swap with one of my favorite baseball player in Vladimir Guerrero Jr.  Some things  I  had trouble with were getting the netting to lineup so it  didn't  look off and the  background. All in all this was my favorite project.       
Read more