HW #1

-






<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=50;
var y=100;
var width = 700
var height= 250;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(87,249,255)';
// add linear gradient
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(158,216,255)");
        //intermediate color
        grd.addColorStop(0.5, "rgb(255,205,140)");
        // ending color
        grd.addColorStop(1, "rgb(158,216,255)");
        context.fillStyle = grd;
        context.fill();
context.fill();


context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Simple V line in pink

var x= 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 400;
var y2 = 300;
var x3 = 500;
var y3 = 450;
var x4 = 750;
var y4 = 100;

//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context. lineTo (x3,y3)
context. lineTo (x4,y4)
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255,0,255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();


//Line Caps
//context.lineCap = "butt"; // "round" or "square"

//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};
</script>

</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

                                          
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var rectx2  = 200;
var recty2 = 200;
var rectwidth2 = 200;
var rectheight2 = 200;
  
//blue and green rectangle2
  context.beginPath();
context.rect(rectx2,recty2,rectwidth2,rectheight2);
context.lineWidth = 3;
context.strokeStyle = 'rgb(128,0,0)';
context.fillStyle = 'rgb(0,128,128)';
  context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x1 =50;
var y1 =50;
var x2 =750;
var y2 =500;


var x3= 300;
var y3= 60;
var x4= 100;
var y4= 500;

var x5= 600;
var y5= 150;
var x6= 550;
var y6= 500;

var x7= 400;
var y7= 75;
var x8= 150;
var y8= 400;

//light blue line
  context.beginPath();
  context.moveTo(x1,y1);
  context.lineTo(x2,y2);
  context.lineWidth = 30;
  context.strokeStyle = 'rgb(0,250,250)';
  context.lineCap = 'round';
  context.stroke();
  


//dark blue line
context.beginPath();
  context.moveTo(x3,y3);
  context.lineTo(x4,y4);
  context.lineWidth = 15;
  context.strokeStyle = 'rgb(0,0,250)';
  context.lineCap = 'square';
  context.stroke();


//orange line
context.beginPath();
  context.moveTo(x5,y5);
  context.lineTo(x6,y6);
  context.lineWidth = 25;
  context.strokeStyle = 'rgb(255,165,0)';
  context.lineCap = 'butt';
  context.stroke();
//green line
context.beginPath();
  context.moveTo(x7,y7);
  context.lineTo(x8,y8);
  context.lineWidth = 8;
  context.strokeStyle = 'rgb(85,255,0)';
  context.lineCap = 'butt';
  context.stroke();


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Logo

-
Image
For this assignment we were supposed to create a logo that resembled ourselves, and while I have many aspects of my life I could have drawn from for inspiration I decided to center this logo around my name. I get so many compliments on my name which I love but I also find quite funny because I had absolutely no choice over the matter, so in away this logo is not only about me but also about my parents who are my everything. My name being Raelyn, my family and friends always call me Rae for short but this logo was mostly inspired from my Mom calling me her Rae of sunshine. I started by putting the letter 'R' on its side and playing with the curvature of the 'R' to get the half sun, and then with the leg of the 'R' to make one of the rays. I tried to make the 'R' stick out more based on the coloring of the last logo by keeping the whole 'R' orange. When choosing a color scheme it only made sense to do an orange and yellow theme however, I m...
Read more

portrait poster

-
Image
I chose this picture of myself because it was a candid picture my best friend took of me and I loved the way it came out when I usually hate candid pictures. The photo was taken on a very high quality camera making each and every one of my freckles pop out. I didn't want to trace over every freckle for the sake of time and my sanity so I started playing with fun shapes to put over them. I settled on stars because my Mom actually bought me a sign for my room when I was younger that had the phrase, "A girl without freckles is like a night without stars" because I used to absolutely hate my freckles. Now I have come to love them and even make them the focal point of this poster design. The coloring of both the stars and my face represent both my colorful personality and my indecisiveness to choose one color!
Read more

Caligram

-
Image
For this assignment I recreated the French artist, Rene Magritte's "The Treachery of Images" painting. I decided to recreate this painting with text because the meaning behind Magritte's painting is that this pipe is merely a representation, not the real thing, much like the goal of this project being to recreate an image out of text. I learned about Magritte and this artwork in particular last semester in my visual literacy class and I thought the concept was really interesting and it resonated with me enough to be my inspiration for this project. The French text under the original famous pipe picture literally means, "This is not a pipe." which I also included in my rendition of the art as well as building the pipe out of that phrase in English. Magritte himself best describes this piece by saying,  "How people reproached me for it! And yet, could you stuff my pipe? No, it's just a representation, is it not? So if I had written on my picture ...
Read more