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

Popular posts from this blog

Three Favorite Photoshop CC Tutorials

3 RELEVANT PHOTOSHOP TUTORIALS 1) Get to know photoshop: https://helpx.adobe.com/photoshop/how-to/ps-basics-fundamentals.html?playlist=/services/playlist.helpx/products:SG_PHOTOSHOP_1_1/learn-path:get-started/set-header:ccx-designer/playlist:ccl-get-started-1/en_us.json&ref=helpx.adobe.com 2) How to use the clone tool: https://helpx.adobe.com/photoshop/how-to/clone-stamp-remove-object.html?playlist=/services/playlist.helpx/products:SG_PHOTOSHOP_1_1/learn-path:key-techniques/playlist:topic/set-header:remove-objects-from-photos/en_us.json&ref=helpx.adobe.com 3) Use layer masks to combine images: https://helpx.adobe.com/photoshop/how-to/combine-image-layer-mask.html?playlist=/services/playlist.helpx/products:SG_PHOTOSHOP_1_1/learn-path:key-techniques/set-header:layer-masking-projects/playlist:topic/en_us.json&ref=helpx.adobe.com

FINAL PORTFOLIO

FMX210 FINAL PORTFOLIO ARTIST STATEMENT:         FMX210 has been a complex yet rewarding class over this past fall semester. This course has taught me the logistics of countless Adobe programs which have bettered my digital media skills. Attached is my portfolio which includes each final project from each program we worked with. My portfolio is themed as red and black with the font Mercurius MT std bold to better the overall composition. Each page is a different project and is done in chronological order from the first unit through the last. I aimed to use InDesign to successfully create a visually appealing portfolio while displaying each of my projects on the consecutive pages, along with a table of contents and an about me page.          My portfolio is crafted in such a way that is visually appealing through the use of color choices, creative fonts, and a simple approach to highlight each project. The theme I chose to create wa...