Tuesday, September 18, 2012

Project 1

When I first found out that I was able to create some sort of landscape through HTML for my first project, I knew exactly that I wanted to do something involving water. Growing up on the shore of Long Island and always being on my family's boat all summer influenced this "under the sea" type of graphic. It was easy to create the gradient of the overall background image because the fading of blues made the "water" look  even more realistic. It wasn't until I got to the fish that I had to take more time carefully graphing out where I wanted them to be placed and having to connect the fin completely so the color could be filled properly. I tried to make a "Nemo" like figure with the first fish, but got creative and made a more dangerous looking one later on with curves. The shark took time and precision also, since I used a bezier curve for most of it. Quadratic and bezier curves were also used for the tan colored bottom ocean floor surface, giving it the look of sand. Sharp lines were used for the starfish connecting to make a complete star that could be filled with a pattern. I thought the overall image needed a little something else to make it stand out when I thought it was completed, so I added a bubbly, fun treasure chest at the bottom!
There is also a loop running through the picture starting at points (0,0). I thought by adding this the water appeared to be rippled, or perhaps just have some reflection within it going on.

Overall, I had a lot of fun with this project and did not mind spending a long time on it. It made me really get into coding and HTML processes a lot, so I'm excited for future projects.



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

 context.fillStyle = "#pink";


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

         // add stroke
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();
        
                         context.beginPath();
                         context.fillStyle = "#pink";
   context.arc(190, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(194, 439, 3, 0 , 2 * Math.PI, false);
    context.arc(199, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(190, 448, 3, 0 , 2 * Math.PI, false);
    context.arc(192, 453, 2, 0 , 2 * Math.PI, false);
    context.arc(199, 459, 2, 0 , 2 * Math.PI, false);
    context.arc(192, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(190, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(194, 465, 2, 0 , 2 * Math.PI, false);
            context.strokeStyle = "#660033";
        context.stroke();

         context.fill();
        context.stroke();        

/* 
triangle
context.beginPath();
context.moveTo(400,50);
context.lineTo(250,500);
context.lineTo(600,500);
context.lineTo(400,50);
context.stroke();
*/
                        context.beginPath();
   context.arc(240, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(244, 439, 3, 0 , 2 * Math.PI, false);
    context.arc(249, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(240, 448, 3, 0 , 2 * Math.PI, false);
    context.arc(242, 453, 2, 0 , 2 * Math.PI, false);
    context.arc(249, 459, 2, 0 , 2 * Math.PI, false);
    context.arc(242, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(249, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(249, 465, 2, 0 , 2 * Math.PI, false);
            context.strokeStyle = "#660033";
            context.fillStyle = "#pink";
        context.stroke();

                         context.beginPath();
   context.arc(160, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(164, 439, 3, 0 , 2 * Math.PI, false);
    context.arc(169, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(160, 448, 3, 0 , 2 * Math.PI, false);
    context.arc(162, 453, 2, 0 , 2 * Math.PI, false);
    context.arc(169, 459, 2, 0 , 2 * Math.PI, false);
    context.arc(162, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(169, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(163, 465, 2, 0 , 2 * Math.PI, false);
            context.strokeStyle = "#660033";
            context.fillStyle = "#pink";
        context.stroke();
context.beginPath();
        context.arc(150, 150, 14, 0, 2 * Math.PI, false);
        context.fillStyle = "orange";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "orange";
        context.stroke();
  var x1=0;
var y1=0;
var x2=canvas.width;

 for (var i=0; i<canvas.height/1; i+=19){
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,i);
        context.lineWidth = 1;
        context.strokeStyle = 'rgb(51,102,204)';
context.stroke();
}              


        

         context.beginPath();
  context.moveTo(150,150);
  context.lineTo(190,200);
  context.lineTo(190,120);
  context.strokeStyle = "orange";
  context.fillStyle = "orange";
  context.fill();
  context.stroke();

 context.beginPath();
        context.arc(145, 147, 1, 0, 2 * Math.PI, false);
        context.fillStyle = "black";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "black";
        context.stroke();

 context.beginPath();
        context.arc(690, 459, 16, 0, 2 * Math.PI, false);
        context.fillStyle = "#black";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
        
context.beginPath();
context.moveTo(300,690)
context.bezierCurveTo(200, 400, 750, 600, 699, 699);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

 context.beginPath();
context.moveTo(560,670)
context.bezierCurveTo(600, 490, 750, 600, 869, 699);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

 context.beginPath();
context.moveTo(560,670)
context.bezierCurveTo(600, 490, 750, 600, 1469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

 context.beginPath();
context.moveTo(160,670)
context.bezierCurveTo(100, 490, 150, 500, 469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

 context.beginPath();
context.moveTo(0,670)
context.bezierCurveTo(100, 490, 150, 500, 469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();

 context.beginPath();
context.moveTo(0,670)
context.bezierCurveTo(0, 420, 0, 380, 469, 619);
       context.fillStyle = "tan";
        context.fill();
context.strokeStyle = "tan";
context.stroke();
//PEBBLES
 context.beginPath();
   context.arc(782, 580, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
         context.beginPath();
   context.arc(772, 590, 3, 0 , 2 * Math.PI/4, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(765, 588, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(794, 584, 3, 0 , 2 * Math.PI/3, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(789, 594, 4, 0 , 2 * Math.PI/5, false);
       context.fillStyle = "#666666";
               context.strokeStyle = "#666666";
        context.stroke();
        context.fill();
        context.stroke();

         context.beginPath();
   context.arc(120, 100, 2, 0 , 2 * Math.PI, false);
   context.strokeStyle = "lightblue";
context.stroke();
        context.stroke();
        context.beginPath();
   context.arc(90, 89, 3.5, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
                context.beginPath();
   context.arc(130, 130, 2.8, 0 , 2 * Math.PI, false);
           context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
         context.beginPath();
   context.arc(112, 110, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
                 context.beginPath();
   context.arc(122, 114, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
        context.fill();
        context.stroke();
        
        
        
context.beginPath();
        context.moveTo(328, 230);
        context.bezierCurveTo(140, 100, 288, 120, 488, 150);
        context.quadraticCurveTo(958, 249, 325, 228);
        context.lineWidth = 8;
               context.fillStyle = "gray";
        context.fill();
        // line color
        context.strokeStyle = "gray";
        context.stroke();
        
context.beginPath();

         context.lineWidth = 10;
        // line color
        context.strokeStyle = "gray";
        context.stroke();
        
             context.beginPath();
   context.arc(282, 150, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "black";
               context.strokeStyle = "black";
               
        context.stroke();
        context.fill();
        context.stroke();
        
        
//seaweed
                context.beginPath();
   context.arc(350, 530, 5, 0 , 2 * Math.PI, false);
   context.lineWidth = 10;
           context.fillStyle = "green";
      context.strokeStyle = "green";
        context.fill();
        context.stroke();
  context.beginPath();
   context.arc(350, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(350, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(353, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(352, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(348, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(349, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(350, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "green";
      context.strokeStyle = "green";
        context.fill();
        context.stroke();
        
        
context.beginPath();
   context.arc(450, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(450, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(453, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(452, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(448, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(449, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(450, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "#009900";
      context.strokeStyle = "#009900";
        context.fill();
        context.stroke();
        
        
context.beginPath();
   context.arc(389, 550, 5, 0 , 2 * Math.PI, false);
   context.arc(393, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(392, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(390, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(396, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(390, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "#009933";
      context.strokeStyle = "#009933";
        context.fill();
        context.stroke();
        
        context.beginPath();
        context.arc(419, 518, 5, 0 , 2 * Math.PI, false);
        context.arc(423, 520, 3, 0 , 2 * Math.PI, false);
        context.arc(420, 527, 6, 0 , 2 * Math.PI, false);
        context.arc(419, 533, 4, 0 , 2 * Math.PI, false);
        context.arc(418, 539, 7, 0 , 2 * Math.PI, false);
   context.arc(420, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(422, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(423, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(420, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(425, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(422, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(420, 599, 7, 0 , 2 * Math.PI, false);
           context.fillStyle = "#006600";
      context.strokeStyle = "#006600";
        context.fill();
        context.stroke();

   context.beginPath();
        context.moveTo(319, 229);
        context.lineTo(389, 189);
        context.lineTo(306, 219);
                context.lineWidth = 6;
        context.lineJoin = "round";
        context.strokeStyle = "black";
               context.fillStyle = "white";
               context.fill();
        context.stroke();
        
                context.beginPath();
        context.moveTo(439, 150);
        context.lineTo(499, 50);
        context.lineTo(529, 190);
        context.lineJoin = "miter";
context.fillStyle = "gray";
        context.fill();
        context.strokeStyle = "gray";
        context.stroke();
        
        
        context.beginPath();
        context.moveTo(600, 190);
        context.lineTo(690, 310);
        context.lineTo(690, 110);
        context.lineTo(610, 190);
        context.fillStyle = "gray";
        context.fill();
        context.stroke();
        
                context.beginPath();
                context.fillStyle = "black";
        context.moveTo(450, 190);
        context.lineTo(420, 234);
      context.strokeStyle = "black";
       context.lineWidth = 2;
        context.stroke();
        
                
                context.beginPath();
        context.moveTo(480, 190);
        context.lineTo(460, 234);
      context.strokeStyle = "black";
       context.lineWidth = 2;
        context.stroke();
        
        context.beginPath();
        context.arc(636, 435, 40, 0, Math.PI/3, false);
        context.arc(639, 435, 40, 0, Math.PI/3, false);
        context.closePath();
        context.lineWidth = 5;
        context.fillStyle = "#black";
        context.fill();
        context.strokeStyle = "black";
        context.stroke();
        
                context.beginPath();
        context.arc(630, 430, 40, 0, Math.PI/3, false);
        context.arc(625, 425, 40, 0, Math.PI/3, false);
        context.arc(620, 424, 40, 0, Math.PI/3, false);
        context.arc(619, 422, 40, 0, Math.PI/3, false);
        context.arc(620, 424, 40, 0, Math.PI/2, false);
        context.arc(620, 419, 40, 0, Math.PI/3, false);
        context.arc(620, 410, 40, 0, Math.PI/3, false);
           context.closePath();
        context.lineWidth = 5;
        context.fillStyle = "#black";
        context.fill();
        context.strokeStyle = "black";
        context.stroke();
                context.closePath();
        context.lineWidth = 5;
        
                         context.beginPath();
   context.arc(742, 444, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
                                 context.beginPath();
   context.arc(732, 434, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
                                 context.beginPath();
   context.arc(755, 424, 2, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
                                 context.beginPath();
   context.arc(722, 454, 1, 0 , 2 * Math.PI, false);
       context.fillStyle = "lightblue";
               context.strokeStyle = "lightblue";
        context.fill();
        context.stroke();
        
        
                                context.beginPath();
       context.fillStyle = "pink";
        context.fill();
        context.stroke();
        
        context.beginPath();
        context.arc(695, 449, 1.5, 0, Math.PI, true);
        context.closePath();
        context.lineWidth = 5;
        context.fillStyle = "#yellow";
        context.fill();
        context.strokeStyle = "yellow";
        context.stroke();
        
        context.beginPath();
        context.moveTo(709, 463);
        context.lineTo(690, 460);
        context.lineWidth = 1;
        context.stroke();
        
        
                        context.beginPath();
        context.moveTo(510, 190);
        context.lineTo(490, 234);
      context.strokeStyle = "black";
       context.lineWidth = 2;
        context.stroke();
    
    
        context.beginPath();
        context.arc(208, 425, 50, 0, Math.PI, true);
        context.closePath();
        context.lineWidth = 5;
context.fillStyle = "#pink";
        context.strokeStyle = "#660033";
        context.fill();
        context.stroke();
        
        
        context.beginPath();
   context.fillStyle = "#pink";
           context.strokeStyle = "#660033";
                   context.fillStyle = "#660033";
                   context.lineWidth = 6;

         context.fill();
        context.stroke();
                 context.beginPath();
   context.arc(212, 430, 2, 0 , 2 * Math.PI, false);
    context.arc(217, 439, 2, 0 , 2 * Math.PI, false);
    context.arc(216, 441, 2, 0 , 2 * Math.PI, false);
    context.arc(215, 445, 2, 0 , 2 * Math.PI, false);
    context.arc(210, 452, 3, 0 , 2 * Math.PI, false);
     context.arc(218, 460, 2, 0 , 2 * Math.PI, false);
     context.arc(211, 468, 2, 0 , 2 * Math.PI, false);
    context.arc(206, 468, 2, 0 , 2 * Math.PI, false);
   context.arc(210, 473, 2, 0 , 2 * Math.PI, false);
           context.fill();
        context.stroke();
        
        
       //STARFISH
               context.beginPath();
  context.moveTo(155,550);
  context.lineTo(160,530);
  context.lineTo(170,550);
  context.lineTo(185,550);
  context.lineTo(170,561);
  context.lineTo(185,576);
  context.lineTo(163,569);
  context.lineTo(147,579);
  context.lineTo(152,562);
  context.lineTo(136,557);
  context.lineTo(155,550);
  context.lineCap = 'round';
                    context.lineWidth = 4;
                    context.strokeStyle = "#ff3333";
                   context.fillStyle = "#FF6666";
  context.stroke();
  context.fill();
  
  
   context.beginPath();
   context.arc(157, 560, 2, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#white";
  context.stroke();
  context.fill();
  
     context.beginPath();
   context.arc(167, 563, 1, 0 , 2 * Math.PI, false);
                      context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();

    context.beginPath();
   context.arc(165, 555, 2, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();
  
     context.beginPath();
   context.arc(162, 544, 1, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();

    context.beginPath();
   context.arc(146, 555, 1, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();

    context.beginPath();
   context.arc(154, 570, 2, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();
  
     context.beginPath();
   context.arc(177, 571, 1, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#white";
                      context.strokeStyle = "#";
  context.stroke();
  context.fill();
        
        
                context.beginPath();
        context.moveTo(500, 650);
        context.lineTo(500, 550);
        context.lineTo(670, 550);
        context.lineTo(670, 650);
        context.lineTo(500, 650);
                   context.fillStyle = 'rgb(102,51,0)';
      context.strokeStyle = 'rgb(102,51,0)';
        context.stroke();
        context.fill();
        
                        context.beginPath();
        context.moveTo(540, 650);
        context.lineTo(540, 549);
      context.strokeStyle = "black";
       context.lineWidth = 4;
        context.stroke();
        
        
                                context.beginPath();
        context.moveTo(630, 650);
        context.lineTo(630, 549);
      context.strokeStyle = "black";
       context.lineWidth = 4;
        context.stroke();
        
                                        context.beginPath();
        context.moveTo(500, 560);
        context.lineTo(670, 560);
      context.strokeStyle = "black";
       context.lineWidth = 4;
        context.stroke();
        
        context.beginPath();
        context.lineCap = 'round'; 
        context.moveTo(560, 550);
        context.lineTo(610, 550);
context.lineTo(610, 580);
context.lineTo(560, 580);
context.lineTo(560, 550);
                   context.fillStyle = "#yellow";
      context.strokeStyle = "#yellow";
        context.stroke();
        context.fill();
        
        context.beginPath();
   context.arc(586, 566, 6, 0 , 2 * Math.PI, false);
                         context.fillStyle = "#black";
                      context.strokeStyle = "#black";
                              context.stroke();
        context.fill();
        
        
        
                
       
        
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

 };

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





Posted by at No comments:

Wednesday, September 12, 2012

New Edited Heart Graphic

This is my new heart that was constructed throughout class.




<!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);
var grd = context.createLinearGradient(400, 0, 400, 600);
         context.lineWidth = 7;
        context.strokeStyle = 'rgb(255,102,102)';
        grd.addColorStop(0, 'rgb(255,51,153)');
       grd.addColorStop(.3, 'rgb(255,204,204)');
       grd.addColorStop(.4, 'rgb(255,255,153)');
       grd.addColorStop(.6, 'rgb(255,204,253)');
        grd.addColorStop(.7, 'rgb(255,204,255)');
        grd.addColorStop(1, 'rgb(204,0,204)');
        context.fillStyle = grd;
        context.fill();

  context.stroke();


context.beginPath();
  context.moveTo(400,200);
context.bezierCurveTo(300, 0, 50, 200, 250, 325);
context.quadraticCurveTo(380, 400, 400, 500);
context.lineCap= "round";
 context.fillStyle = 'rgb(255,0,102)';
        context.fill();
         context.lineWidth = 7;
        context.strokeStyle = 'rgb(255,102,102)';
        context.stroke();

  context.stroke();


context.beginPath();
  context.moveTo(400,200)
context.bezierCurveTo(500, 0, 750, 200, 550, 325);
context.quadraticCurveTo(435, 400, 400, 500);
 context.fillStyle = 'rgb(255,0,102)';
        context.fill();
         context.lineWidth = 7;
        context.strokeStyle = 'rgb(255,102,102)';
        context.stroke();



 context.stroke();




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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at No comments:

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>


Posted by at No comments:
Subscribe to: Posts (Atom)