HTML5 Game - Drawing with Quadratic Curves

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

Description

Drawing with Quadratic Curves

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>// www. ja v a  2s  .c  o m
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

         //Quadratic curves 
         context.strokeStyle = "rgba(0, 0, 0, 1)"; 
         context.beginPath(); 
         context.moveTo(275, 125); 
         context.quadraticCurveTo(225, 125, 225, 162); 
         context.quadraticCurveTo(260, 200, 265, 200); 
         context.quadraticCurveTo(325, 200, 325, 162); 
         context.quadraticCurveTo(325, 125, 275, 125); 
         context.closePath(); 
         context.stroke(); 


  
</script> 

</div>
</body>
</html>

Related Topic