HTML5 Game - Draw Quadratic path with control points in red

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

Description

Draw Quadratic path with control points in red

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  let drawing;//www . j a v  a2  s  . c  o m
  let con;
  function draw(){
    drawing = document.getElementById("drawing");
    con = drawing.getContext("2d");

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

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

    //mark control points with red
    drawDot(100, 10, "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>Quadratic path demo</h1>
  <canvas id = "drawing"
          height = "200"
          width = "200">
    <p>Canvas not supported</p>
  </canvas>
  <p>Beginning and end shown in blue <br />
     control points shown in red</p>
</body>
</html>

Related Topic