Canvas Project

I decided to do my project about Super Mario. I chose Mario because I was searching through the internet for some inspiration and found that picture. I spent about 8 hours on this project. I was really scared at first because I did not know how to code but after getting used to it, it was way easier. I used different shapes like circles triangles, arcs, and squares.

 I created this art in Dreamweaver using HTML. Having to use different shapes was hard because you have to place them where you want them. This was the most challenging part because it was difficult and time-consuming to place every coordinate where you want it. After getting used to it and getting better at it it was easier than at first. 

                                                            Inspiration:

Sketch:

Code:

// BACKGROUND

context.beginPath();

context.rect(0,0,800,600); // x,y,w,h

context.closePath();

context.fillStyle = "rgba(87,133,221,1.00)";

context.fill();

context.strokeStyle = "rgba(44,47,51,1)";

context.stroke();

context.closePath();

//Rectangle 1

var x=150;

var y=100;

var width = 100

var height= 100;

context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(177,128,57,1.00)';

context.strokeStyle = 'rgba(177,128,57,1.00)';

context.fill();

context.stroke();

//Rectangle 2

var x=450;

var y=100;

var width = 340

var height= 100;

context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(177,128,57,1.00)';

context.strokeStyle = 'rgba(177,128,57,1.00)';

context.fill();

context.stroke();

//Rectangle 3

var x=570;

var y=100;

var width = 100

var height= 100;

context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(101,67,17,1.00)';

context.strokeStyle = 'rgba(101,67,17,1.00)';

context.fill();

context.stroke();

//Rectangle 2

var x=0;

var y=490;

var width = 800

var height= 100;

context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(177,128,57,1.00)';

context.strokeStyle = 'rgba(177,128,57,1.00)';

context.fill();

context.stroke();

//Arc green

 // starting point coordinates

var x = 130;

var y = 486;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 150;

var cpointY = canvas.height / 2 -100;

// ending point coordinates

var x1 = 370;

var y1 = 486;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = 'rgba(16,96,29,1.00)';

context.lineWidth = 3;

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

context.fill();

context.stroke();

 //Rectangle on the mountain

var x=240;

var y=400;

var width = 10

var height= 30;

context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

////circle mountain

 

  var centerX = canvas.width /3;

        var centerY = canvas.height / 1.5;

        var radius = 7;

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

 

////circle 1 square botto left

 

  var centerX = canvas.width /5.3;

        var centerY = canvas.height / 3;

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

////circle 2 square top left

 

  var centerX = canvas.width /5.3;

        var centerY = canvas.height / 5.9;

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

 ////circle 3 square bottom right

 

  var centerX = canvas.width /3.2;

        var centerY = canvas.height / 3;

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

////circle 4 square top left

 

  var centerX = canvas.width /3.2;

        var centerY = canvas.height / 5.9;

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

////circle 1 square bottom left on rectangle

 

  var centerX = canvas.width /1.77;

        var centerY = canvas.height / 3;

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

////circle 2 square top left on the rectangle

 

  var centerX = canvas.width /1.77;

        var centerY = canvas.height / 5.9;

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

////circle 3 square bottom right on the rectangle

 

  var centerX = canvas.width /1.43;

        var centerY = canvas.height / 3;

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

////circle 4 square top left on the rectangle

 

  var centerX = canvas.width /1.43;

        var centerY = canvas.height / 5.9;

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

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

 

  var centerX = canvas.width /1.17

        var centerY = canvas.height / 3;

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

////circle 2 square top left on the rectangle to the right

 

  var centerX = canvas.width /1.17;

        var centerY = canvas.height / 5.9;

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

////circle 3 square bottom right on the rectangle on the right

 

  var centerX = canvas.width /1.013;

        var centerY = canvas.height / 3;

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

////circle 4 square top left on the rectangle

 

  var centerX = canvas.width /1.013;

        var centerY = canvas.height / 5.9;

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

//  Question mark 1

context.beginPath();

context.font = "95px sans-serif"

context.fillStyle = "rgba(98,69,24,1.00)";

context.fillText ("?", 179, 182);

context.closePath();

//  Question mark 2

context.beginPath();

context.font = "95px sans-serif"

context.fillStyle = "rgba(98,69,24,1.00)";

context.fillText ("?", 479, 182);

context.closePath();

//  Question mark 3

context.beginPath();

context.font = "95px sans-serif"

context.fillStyle = "rgba(98,69,24,1.00)";

context.fillText ("?", 715, 182);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 595);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 583);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 571);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 559);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 547);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 535);

context.closePath();

//  patern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 523);

context.closePath();

//  pattern

context.beginPath();

context.font = "35px sans-serif"

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

context.fillText ("-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|", 0, 511);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 120);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 130);

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 140);

context.closePath();

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 150);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 160);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 170);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 180);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 190);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 200);

context.closePath();

//  pattern on top single

context.beginPath();

context.font = "33.4px sans-serif"

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

context.fillText ("|----|----|", 562, 206);

context.closePath();

// starting point coordinates

var x = 0;

var y = 485;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2.5 - 350;

var cpointY = canvas.height / 2 - 10;

// ending point coordinates

var x1 = 109;

var y1 =485;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = 'rgba(35,212,64,1.00)';

context.lineWidth = 5;

context.strokeStyle = "rgba(2,2,2,1.00)";

context.stroke();

context.fill();

 

//left TRIANGLE

context.beginPath(); // begin a shape

 

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

context.lineTo(445, 460); // point B coords

context.lineTo(360,460); // point C coords

context.fillStyle = "rgba(127,96,31,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(127,96,31,1.00)"; // Reb Green Blue Alpha

context.stroke();

////left eye for the mushroom

 

  var centerX = canvas.width /2.04;

        var centerY = canvas.height / 1.37;

        var radius = 2.7;

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

////right eye for the mushroom

 

  var centerX = canvas.width /1.97;

        var centerY = canvas.height / 1.37;

        var radius = 2.7;

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

//left leg

var x=379;

var y=465;

var width = 5

var height= 20;

context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

//right leg

var x=414;

var y=465;

var width = 5

var height= 20;

context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

//Right foot

var x=414;

var y=478;

var width = 15

var height= 8;

context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

//left foot

var x=369;

var y=478;

var width = 15

var height= 8;

context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

// right bush

var x = 700;

var y = 487;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1.0 - 1;

var cpointY = canvas.height / 2 - 18;

// ending point coordinates

var x1 = 800;

var y1 =487;

context.beginPath();

context.moveTo(x, y);

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

context.fillStyle = 'rgba(35,212,64,1.00)';

context.lineWidth = 5;

context.strokeStyle = "rgba(2,2,2,1.00)";

context.stroke();

context.fill();

 

////Mario head

 

  var centerX = canvas.width /5;

        var centerY = canvas.height / 2.2;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "rgba(54,165,81,1.00)";

context.fillStyle = '#FFFF00';

context.fill();

        context.stroke();

// marios body square

var x=141;

var y=287;

var width = 40

var height= 40;

context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(252,4,59,1.00)';

context.strokeStyle = 'rgba(54,165,81,1.00)';

context.fill();

context.stroke();

////Left eye for mario

 

  var centerX = canvas.width /5.3;

        var centerY = canvas.height / 2.3;

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

//// right eye for mario

 

  var centerX = canvas.width /4.9;

        var centerY = canvas.height / 2.3;

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

//Right leg mario

var x=185;

var y=325;

var width = 20

var height= 4;

context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

//right foot mario

var x=200;

var y=310;

var width = 5

var height= 10;

context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(244,2,32,1.00)';

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

context.fill();

context.stroke();

//left leg mario

 

var x=118;

var y=325;

var width = 20

var height= 4;

context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

//left leg

var x=118;

var y=325;

var width = 5

var height= 20;

context.beginPath();

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

context.lineWidth = 10;

context.fillStyle = 'rgba(247,5,5,1.00)';

context.strokeStyle = 'rgba(250,1,5,1.00)';

context.fill();

context.stroke();

//right hand

context.moveTo(180,290); // COORDINATES OF STARTING POINT

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

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//left hand

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

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

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Hat

var x=150;

var y=240;

var width = 20

var height= 8;

context.beginPath();

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

context.lineWidth = 8;

context.fillStyle = 'rgba(249,2,22,1.00)';

context.strokeStyle = 'rgba(250,1,5,1.00)';

context.fill();

context.stroke();

//hat

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

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

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

Internet/World Wide Web

The internet was created by many scientists. Nikola Tesla kept saying that he wanted to create a "worldwide system" in the 1900s. Paul Otlet and Vannevar Bush came up with searchable storage systems of books between the 1930s, and 1940s,. The internet first began a thing in 1983 created by Bob Kahn and Vinton Cerf. It was invented for military purposes and then it became a form of communication between scientists. The internet is a huge network that connects computers all over the world. The internet can be used to share information and look up information from any place in the world. 

The World Wide Web is information on the internet whose function is to connect documents by hypertext links. It was created by Tim Berners-Lee and Robert Cailliau in 1989. It was created to meet the demand for automated information sharing between scientists in universities and institutes around the world.  Nowadays it is used to connect the world making it much easier for people to get information and share it. The worldwide web made it easier for people to communicate and share content. 

The internet and the world wide web are not the same things. Many people think it is the same thing but it is not. The internet is a huge network that connects every computer. While the worldwide web is a collection of web pages found on the networks of computers. The Internet and the world wide web work together because the world wide web is inside the internet. The first website was created in 1989 by Tim Berners-Lee. The website is not available today but the URL was the following: http://info.cern.ch/hypertext/WWW/TheProject.html

Sources:

https://www.britannica.com/technology/Internet

https://www.history.com/topics/inventions/invention-of-the-internet

https://home.cern/science/computing/birth-web

https://www.bbc.co.uk/bitesize/topics/zkcqn39/articles/z2nbgk7

https://www.businessinsider.com/flashback-this-is-what-the-first-website-ever-looked-like-2011-6

#0 Assignment

My name is Gustavo Cabrer, I am from Puerto Rico and now an incoming freshman at The University of Tampa. I am 18 years old and love the ocean. My first feeling about the class was not so good. I was kind of scared at the beginning but when I heard the professor explain the class I am kind of interested now. I am very interested in tech and always enjoy learning new features. I am majoring in Business entrepreneurship and would like to learn more from digital media because it will help me start a business when the time comes. 

The ocean is my second home since I was basically born on a boat. I like to think I did because since I was 1-year old I was already on a boat. I like every sport that has to be done in water, kiteboarding, wakeboarding, and foiling. I live in a beachfront community in Puerto Rico so I love going to the beach and going on my boat. Some of my accomplishments are having my scuba and boating license. Being able to get from UT to the beach in 20 minutes is definitely a big impact on my decision to come to UT.