Canvas

 


    I chose my design searching on the internet. I found a mosaic piece and then I tried to copy it and make the image in my own way. I picked this image because it had all the requirements this assignment asked us to have. It may look very simple to do but with all the code and details this image has it was harder than you may think.

    Since this image had a lot of details I have to do, and knowing how to place each shape together is actually takes a lot of time for me. What I did is play with the numbers of the code until I got to the place that I wanted. This project took me about 8 hours to make in total. What I think makes this project so successful is because of all the hours and details I had to do to make it look good.

code:

//backgroung 1


var x=0;

var y=300;

var width = 6500

var height= 320;


context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(187,40,42,1.00)';

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

context.fill();

context.stroke();

// background 2


var x=0;

var y=0;

var width = 6500

var height= 320;


context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();


//little circle

 var centerX = canvas.width / 6;

        var centerY = canvas.height / 6;

        var radius = 40;

        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.stroke();

 

//Simple lines 1


context.moveTo(10,200); // COORDINATES OF STARTING POINT

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

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE


//Simple lines 2


context.moveTo(10,100); // COORDINATES OF STARTING POINT

context.lineTo(800, 100); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE




//big circle

 var centerX = canvas.width/1.5;

        var centerY = canvas.height / 1.5;

        var radius = 200;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "black";

        context.fill();

context.strokeStyle = "black"

context.stroke();

 

//top arc

var centerX = 550;

var centerY = 400

var radius = 170;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.fillStyle = "white"

context.fill();

context.lineWidth = 4;

context.strokeStyle = "white"

context.stroke();


//left arc

var centerX = 550;

var centerY = 360

var radius = 135;

var startangle = 1.35* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "white"

context.fill();

context.lineWidth = 4;

context.strokeStyle = "white"

context.stroke();

 

//right arc

var centerX = 550;

var centerY = 360

var radius = 135;

var startangle = 1.35* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "white"

context.fill();

context.lineWidth = 4;

context.strokeStyle = "white"

context.stroke();

 

  //left TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(400,172); // point A coordinates

context.lineTo(500, 235); // point B coords

context.lineTo(430,285); // point C coords


context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

//right TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(750,210); // point A coordinates

context.lineTo(680, 320); // point B coords

context.lineTo(640,250); // point C coords


context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

//left eye

var centerX = canvas.width / 1.6;

        var centerY = canvas.height / 1.8;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 3;

        context.strokeStyle = "black";

        context.stroke();


//right eye mark

var centerX = canvas.width / 1.3;

        var centerY = canvas.height / 1.8;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 3;

        context.strokeStyle = "black";

        context.stroke();

context.fillStyle = "black";

        context.fill();

//Right eye mark

var centerX = canvas.width / 1.25;

        var centerY = canvas.height / 2;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 3;

        context.strokeStyle = "black";

        context.stroke();

context.fillStyle = "black";

        context.fill();


//right eye

var centerX = canvas.width / 1.3;

        var centerY = canvas.height / 1.8;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 3;

        context.strokeStyle = "white";

        context.stroke();

context.fillStyle = "white";

        context.fill();

//left eye pupil

var centerX = canvas.width / 1.6;

        var centerY = canvas.height / 1.8;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 3;

        context.strokeStyle = "blue";

        context.stroke();

context.fillStyle = "blue";

        context.fill();

//right eye pupil

var centerX = canvas.width / 1.3;

        var centerY = canvas.height / 1.8;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 3;

        context.strokeStyle = "blue";

        context.stroke();

context.fillStyle = "blue";

        context.fill();


 

//Rectangle 


var x=60;

var y=490;

var width = 350

var height= 50;


context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

//tail

context.beginPath(); // begin a shape

 

context.moveTo(55,490); // point A coordinates

context.lineTo(25, 542); // point B coords

context.lineTo(80,542); // point C coords


context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

//nose 

context.beginPath(); // begin a shape

 

context.moveTo(510,450); // point A coordinates

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

context.lineTo(590,450); // point C coords


context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

//left whisker 1

var centerX =450;

var centerY = 470;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "gray"

context.stroke();

context.fillStyle = 'rgba(187,40,42,1.00)';

//left whisker 2

var centerX =450;

var centerY = 490;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "gray"

context.stroke();

//left whisker 3

var centerX =450;

var centerY = 450;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "gray"

context.stroke();

//right whisker 1

var centerX =650;

var centerY = 470;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "gray"

context.stroke();

//right whisker 2

var centerX =650;

var centerY = 490;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "gray"

context.stroke();

//right whisker 3

var centerX =650;

var centerY = 450;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "gray"

context.stroke();


//paw 1

 var centerX = canvas.width / 2.1;

        var centerY = canvas.height / 1.1;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "white";

        context.stroke();

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

context.fill();

 //paw 2

 var centerX = canvas.width / 1.7;

        var centerY = canvas.height / 1.05;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "white";

        context.stroke();

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

context.fill();


//paw 3

 var centerX = canvas.width / 1.3;

        var centerY = canvas.height / 1.05;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "white";

        context.stroke();

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

context.fill();

//paw 4

 var centerX = canvas.width / 1.14;

        var centerY = canvas.height / 1.13;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

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

    

        context.lineWidth = 5;

      

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

context.fill();


//Simple lines 1


context.moveTo(350,545); // COORDINATES OF STARTING POINT

context.lineTo(350,572); // COORDS OF ENDING POINT 1

context.lineWidth = 1; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 2


context.moveTo(375,545); // COORDINATES OF STARTING POINT

context.lineTo(375,588); // COORDS OF ENDING POINT 1

context.lineWidth = 1; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 3


context.moveTo(400,545); // COORDINATES OF STARTING POINT

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

context.lineWidth = 1; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 4


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

context.lineTo(445,610); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 5


context.moveTo(467,575); // COORDINATES OF STARTING POINT

context.lineTo(467,615); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 6


context.moveTo(490,570); // COORDINATES OF STARTING POINT

context.lineTo(490,615); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 7


context.moveTo(590,570); // COORDINATES OF STARTING POINT

context.lineTo(590,615); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 8


context.moveTo(615,580); // COORDINATES OF STARTING POINT

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

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 9


context.moveTo(638,575); // COORDINATES OF STARTING POINT

context.lineTo(638,615); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines 10


context.moveTo(680,535); // COORDINATES OF STARTING POINT

context.lineTo(680,565); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines  11


context.moveTo(704,540); // COORDINATES OF STARTING POINT

context.lineTo(704,570); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

//Simple lines  12


context.moveTo(725,536); // COORDINATES OF STARTING POINT

context.lineTo(725,566); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.stroke(); // STROKE

context.strokeStyle = "black";

        context.stroke();

Comments

Post a Comment

Popular posts from this blog

Business card

Image
Orlando Mena  Mission Statement    For this task, we needed to make three distinct business cards. As somebody that is a business venture significant I truly appreciated making this project. In the first business card, I attempted to do my own variant of what the teacher introduced us to. I began playing with the pencil device tool and did a few waves to make a cool foundation for my logo. I am truly delighted with how my first business card ended up.    At first, I had my questions regarding what I needed for the following two business cards. I began playing with the foundations and with various shapes and everything looked great together and that was the manner by which the second business card was made. I truly loved the delightful way it ended up and it was without anybody's assistance. For the last business card, I think of it as my top pick. I truly like the shadings that I added and the way everything looks. Generally, I truly liked my business cards and ...
Read more

Autoscopy

Image
 Orlando Mena Autoscopy Artist Statement        In this venture, I began by checking out a portion of the photos that the educator introduced as thoughts for the task and I tracked down an extremely dim picture on an oceanside with a skull. I truly enjoyed the photograph, I began to play with it until I tracked down how to combine my face with the skull for it to look great. I opened my mouth to the image of myself for me to look better once the photos were blended. I grew up adoring the motion pictures from Pirate of the Caribbean, so when I saw this photograph I realized I could assemble something around it.       When I wrapped up consolidating my face with the skull which was essentially the troublesome aspect I proceeded to play with the haziness of the photos for it to look dull and better. Then, at that point, I began searching for more photographs to add, and I observed a skeleton sitting just as a skeleton banner. I needed to make bo...
Read more

BW to color

Image
 Orlando Mena Artist Statement            On this assignment, I had to take a picture of myself and color the background with different colors. I don't have pictures of myself, meaning I had to get creative and look around where I could take a picture with a good background. I found a spot beside the bride on the riverwalk which I really liked and took the picture. Then I used photoshop to edit the picture and make it different colors.                I chose the colors that I wanted for each time that I had to do it and started playing with the pictures trying to find which colors looked best. I colored the bridge, water, rail, grass, hat, shirt, and sky. When I finished coloring everything I lowered the opacity of the colors to make the picture look better. Overall I think I did well. 
Read more