Monday, September 10, 2012

Heart Graphic

The first heart I tried to construct, which is the one in the middle of the graphic, is a little disproportional. I used three different quadratic curves and tried to make them all meet smoothly, however, I could not fix the hard edges on the outside of the heart. Also, using a quadratic curve, I could not get the bottom of the heart to be as sharp as I would like. I could not get a gradient in this image, but was able to fill it with a solid color.
The heart that is more towards the left of my graphic turned out looking much better than the first. I was able to easily smooth all edges, which also allowed me to fill it with a radial gradient. I used two bezier curves that connected together.


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

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

context.beginPath();
 context.rect(0, 0, canvas.width, canvas.height);
   context.fillStyle = 'rgb(200,69,141)';
  context.fill();
 context.stroke();

  var grd = context.createLinearGradient(400, 0, 400, 600);
        // light blue
        grd.addColorStop(0, 'rgb(210,204,205)');
        // dark blue
        grd.addColorStop(.5, "#hotpink");
        grd.addColorStop(1, 'rgb(230,100,204)');
        context.fillStyle = grd;
        context.fill();

context.beginPath();
        context.moveTo(238, 250);
        context.quadraticCurveTo(288, 0, 388, 239);
               context.quadraticCurveTo(488, 0, 538, 250);
               context.quadraticCurveTo(388, 600, 238, 248);
        context.fillStyle = 'rgb(204,0,102)';
  context.fill();
        context.lineWidth = 10;
        // line color
        context.strokeStyle = 'rgb(102,0,51)';
        context.stroke();
        
        
        

context.beginPath();
        context.moveTo(88, 230);
        context.bezierCurveTo(160, 10, 180, 180, 99, 390);
        context.moveTo(88, 230);
        context.bezierCurveTo(10, 10, 10, 230, 99, 390);
        var grd = context.createRadialGradient(28, 20, 10, 38, 150, 200);
        grd.addColorStop(0, "#pink");
        grd.addColorStop(1, 'rgb(204,0,102)');
        context.fillStyle = grd;
        context.fill();
        
  context.fill();
        context.lineWidth =1;
        // line color
        context.strokeStyle = 'rgb(204,0,102)';
        context.stroke();





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

};

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


No comments:

Post a Comment