Abstract

                                                                 

Abstract !

 HTML5

 var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

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

      // add linear gradient

      var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);

      // light blue

      grd.addColorStop(0, '#8ED6FF');   

      // dark blue

      grd.addColorStop(1, '#004CB3');

      context.fillStyle = grd;

      context.fill();

      

   

      

           var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      var rectWidth = 400;

      var rectHeight = 500;

      var rectX = 70;

      var rectY = 50;

      var cornerRadius = 50;

      context.beginPath();

      context.moveTo(rectX, rectY);

      context.lineTo(rectX + rectWidth - cornerRadius, rectY);

      context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);

      context.lineTo(rectX + rectWidth, rectY + rectHeight);

      context.lineWidth = 5;

      context.stroke();

    var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      context.beginPath();

      context.arc(288, 360, 200, 0, Math.PI, false);

      context.closePath();

      context.lineWidth = 5;

      context.fillStyle = 'purple';

      context.fill();

      context.strokeStyle = '#550000';

      context.stroke();

      

         var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      // butt line cap (top line)

      context.beginPath();

      context.moveTo(20, canvas.height / 2 - 50);

      context.lineTo(canvas.width - 20, canvas.height / 2 - 50);

      context.lineWidth = 20;

      context.strokeStyle = 'black';

      context.lineCap = 'butt';

      context.stroke();

      // round line cap (middle line)

      context.beginPath();

      context.moveTo(20, canvas.height / 2);

      context.lineTo(canvas.width - 200, canvas.height / 2);

      context.lineWidth = 20;

      context.strokeStyle = 'black';

      context.lineCap = 'square';

      context.stroke();

      // square line cap (bottom line)

      context.beginPath();

      context.moveTo(20, canvas.height / 2 + 50);

      context.lineTo(canvas.width - 200, canvas.height / 2 + 50);

      context.lineWidth = 20;

      context.strokeStyle = 'black';

      context.lineCap = 'square';

      context.stroke();

      

     var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      context.beginPath();

      context.moveTo(100, 100);

      context.quadraticCurveTo(400, 0, 388, 150);

      context.lineWidth = 5;

      // line color

      context.strokeStyle = 'orange';

      context.stroke();

            

               var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      context.beginPath();

      context.moveTo(70, 70);

      context.quadraticCurveTo(300, 0, 388, 150);

      context.lineWidth = 5;

      // line color

      context.strokeStyle = 'red';

      context.stroke();

       

                    var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      context.beginPath();

      context.moveTo(60, 5, 0);

      context.quadraticCurveTo(200, 0, 388, 150);

      context.lineWidth = 5;

      // line color

      context.strokeStyle = 'orange';

      context.stroke();

             var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');

      context.beginPath();

      context.moveTo(40, 40);

      context.quadraticCurveTo(100, 0, 388, 150);

      context.lineWidth = 5;

      // line color

      context.strokeStyle = 'red';

      context.stroke();