HTML5 Game - Draw Bezier path with control points shown in red

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

Description

Draw Bezier path with control points shown in red

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  let drawing;//ww w. j  a v a2s  .co m
  let con;

  function draw(){
    drawing = document.getElementById("drawing");
    con = drawing.getContext("2d");

    con.strokeStyle = "black";
    con.lineWidth = "5";
    con.beginPath();
    con.moveTo(10,10);
    con.bezierCurveTo(100, 10, 100, 190, 190, 190);
    con.stroke();
    con.closePath();

    //mark beginning and end with blue
    drawDot(10, 10, "blue");
    drawDot(190, 190, "blue");

    //mark control points with red
    drawDot(100, 10, "red");
    drawDot(100, 190, "red");

  }

  function drawDot(x, y, color){
    con.fillStyle = color;
    con.beginPath();
    con.arc(x, y, 10, 0, 2 * Math.PI, true);
    con.fill();
    con.closePath();
  }
  </script>
</head>

<body onload = "draw()">
  <h1>Bezier path demo</h1>
  <p>Beginning and end shown in blue <br />
     control points shown in red</p>  
  <canvas id = "drawing"
          height = "200"
          width = "200">
    <p>Canvas not supported</p>
  </canvas>

</body>
</html>

Related Topic