HTML5 Game - Draw curve on grid

Description

Draw curve on grid
Demo

<!doctype html>
<html>
  <head>
    <title>More drawing to canvas</title>
  </head>/*from w ww .j a v a2  s.c om*/
  <body>
    <h1>More drawing to canvas</h1>
    <canvas id="balls" width="400" height="400"></canvas>
    <script>
      let canvas = document.getElementById("balls");
      let context = canvas.getContext("2d");

      function draw_grid(ctx) {
        minor = 10;
        major = minor * 5;
        stroke = "#00FF00";
        fill = "grey";
        ctx.save();
        ctx.strokeStyle = stroke;
        ctx.fillStyle = fill;
        for(let x = 0; x < ctx.canvas.width; x += minor) {
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, ctx.canvas.height);
          ctx.lineWidth = (x % major == 0) ? 0.5 : 0.25;
          ctx.stroke();
          if(x % major == 0 ) {ctx.fillText(x, x, 10);}
        }
        for(let y = 0; y < ctx.canvas.height; y += minor) {
          ctx.beginPath();
          ctx.moveTo(0, y);
          ctx.lineTo(ctx.canvas.width, y);
          ctx.lineWidth = (y % major == 0) ? 0.5 : 0.25;
          ctx.stroke();
          if(y % major == 0 ) {ctx.fillText(y, 0, y + 10);}
        }
        ctx.restore();
      }

       draw_grid(context);


      context.beginPath();
      context.strokeStyle = "#FFFFFF";
      context.fillStyle = "#00FF00";
      context.lineWidth = 2;
      context.moveTo(50, 50);
      context.lineTo(150, 250);
      context.lineTo(250, 170);
      context.lineTo(320, 280);
      context.bezierCurveTo(0, 0, 80, 250, 150, 250);
      context.bezierCurveTo(250, 250, 250, 250, 250, 170);
      context.bezierCurveTo(250, 50, 400, 350, 320, 280);
      // context.fill();
      context.closePath();
      context.stroke();
      context.fillText("(50, 50)", 30, 40);
      context.fillText("(150, 250)", 130, 260);
      context.fillText("(250, 170)", 255, 175);
      context.fillText("(320, 280)", 325, 285);


      context.beginPath()
      context.moveTo(50, 250);
      context.quadraticCurveTo(25, 300, 50, 350);
      context.quadraticCurveTo(100, 375, 150, 350);
      context.closePath();
      context.moveTo(230, 360);
      context.quadraticCurveTo(255, 340, 270, 360);
      context.quadraticCurveTo(255, 340, 270, 310);
      context.closePath();
      context.moveTo(250, 50);
      context.quadraticCurveTo(310, 60, 370, 50);
      context.quadraticCurveTo(40, 75, 370, 100);
      context.closePath();
      context.strokeStyle = "red";
      context.fillStyle = "grey";
      context.fill();
      context.stroke();
    </script>
  </body>
</html>
HTML5 Game - Draw curve on grid

Description

Demo

Related Topic
