HTML5 Game - Drawing quadratic curves

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Quadratic Curve

Description

Drawing quadratic curves

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
     <title>Bezier Curves: Quadratic</title>
      <style> 
         body {/*w  ww.  j  a  v  a2  s  .c  o  m*/
            background: lightskyblue;
         }

         #text {
            position: absolute;
            left: 43px;
            top: 15px;
            display: inline;
            color: navy;
         }

         #scaledCanvas {
            position: absolute;
            left: 75px;
            top: 15px;
         }

         #text {
            font: 16px Helvetica;
         }
      </style>
   </head>

  <body>
      <canvas id='canvas' width='350' height='300'>
        Canvas not supported
      </canvas>

    <script>
      
let context = document.getElementById('canvas').getContext('2d');

context.fillStyle     = 'cornflowerblue';
context.strokeStyle   = 'yellow';

context.shadowColor   = 'rgba(50, 50, 50, 1.0)';
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur    = 4;

context.lineWidth = 20;
context.lineCap = 'round';

context.beginPath();
context.moveTo(120.5, 130);
context.quadraticCurveTo(150.8, 130, 160.6, 150.5);
context.quadraticCurveTo(10, 250.0, 210.5, 160.5);
context.quadraticCurveTo(240, 100.5, 290, 70.5);
context.stroke();


      </script>
  </body>
</html>

Related Topic