Skip to main content

Second Homework Heart


MY CODE: 

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


//Heart

//Bezier Curve Variables



var Ax = 375;
var Ay = 200;
var Bx = 375;
var By = 500;
var control1x = 170;
var control1y = -80;
var control2x = 100;
var control2y = 350;
var control3x = 710;
var control3y = 350;
var control4x = 570;
var control4y = -80;

        context.beginPath();
        context.moveTo(Ax, Ay);
        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
        context.lineWidth = 10;
        // line color
        context.strokeStyle = 'rgb(255, 100, 100)';
        context.lineCap = 'round';
        context.stroke();
        context.fillStyle   = 'rgb(255, 0, 0)';
        context.fill();

//background grd 

context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
var grd = context.createLinearGradient(200, 50, canvas.width, canvas.height);
      // light green
      grd.addColorStop(0, '#CCCCFF'); 
      // dark green
      grd.addColorStop(1, '#61C771');
      context.fillStyle = grd;
      context.fill();
var x = 0;
var y = 400;
var controlX = 900;
var controlY = 900;
var x1 = 700;
var y1 = 10;
var controlX1 = 700;
var controlY1 = 400;
var x2 = 10;
var y2 = 900;




context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'rgb(255, 250, 50)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = "rgb(255,210,220)";
context.stroke();

//Simple V line in pink

var x= -400;
var y = 100;
var x1 = 100;
var y1 = 270;
var x2 = 300;
var y2 = -300
var x3 = 200;
var y3 = -10
var x4 = -2000;
var y4 = 800
//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(100,0,200)'; // 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>

Comments

Post a Comment

Popular posts from this blog

Tag Brush

TAG BRUSH ARTIST STATEMENT:          The piece I have created is a tag brush of my previously created travel logo. This brush can be used as a stamp and can be place wherever desired. The composition above shows the brush stamped a few times to create a psychedelic blue and purple effect that is visually appealing.          As stated before when describing my logo, this piece highlights my traveling and yearn to explore the world and other cultures. What is interesting about this composition specifically is that the logo is now a stamp that can be easily transferred and simply pasted on any other work of art. This makes it accessible and allows for it to be changed to multiple different colors and looks depending on what is necessary.         Overall, this tagbrush is relevant in being able to use the logo I created and apply it to other compositions. It can be made visually appealing and fitting ...
1 comment
Read more

Self Portrait Poster

SELF PORTRAIT POSTER ARTIST STATEMENT:         The piece that I have created is a self portrait poster that represents myself in a propaganda type manner. I used a recent photo of myself to create a simple composition in every way possible except for my face. With my face, I aimed to use color to create the highlights and shadows from the original image through a variety of colorful shapes. In doing this, I aimed to create a visually appealing, colorful composition that still fit the criteria of the poster assignment.          My self portrait poster is based on the quote "always dream in color." I decided to create my piece to exemplify the idea of living life to it's greatest extents and to live your best life- in a propaganda style. I used a large amount of different lines and shapes to make my face look as realistic as possible and relate similarly to the original image. I chose to put the quote on one side of the image ra...
1 comment
Read more

Travel Logo

    TRAVEL LOGO Artist Statement:         This logo was created to exemplify my travels and study abroad, as well my environmental passions and years of veganism. The plane leaving the world shows my love for travel and always wanting to "take off" to a new destination. As the plane is leaving the earth, my passions as well as yearning to explore other cultures can be understood.         My ideas are represented through this logo as the meaning, to some extent, can be easily understood as it is fairly simple and not too ambiguous. It is apparent that there is a plane taking off from the world, which is often seen as a general symbol for travel and a sense of "wanderlust." The color choice allows for there to be a visually appealing contrast to create a more successful overall composition. Another technical aspect that adds to the overall composition is how the line connected to the plane seamlessly leaves the earth.   ...
Post a Comment
Read more