HTML5 การใช้งาน Canvas Graphic

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
  <script>
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");
  </script>

  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
  <script>
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");

    
    context.fillStyle = "blue";
    context.fillRect(20, 20, 150, 100);

    context.strokeStyle = "red";
    context.strokeRect(200, 20, 150, 100);

  </script>

  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
  <script>
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");


    context.beginPath();
    context.moveTo(50, 50);
    context.lineTo(200, 200);
    context.stroke();

  </script>

  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
  <script>
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");


    context.beginPath();
    context.arc(150, 150, 75, 0, 2 * Math.PI);
    context.fillStyle = "green";
    context.fill();
    
  </script>

  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
  <script>
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");


    context.font = "30px Arial";
    context.fillText("Hello World", 100, 100);

    context.strokeText("Hello World", 100, 150);
    
  </script>

  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
  <script>
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");


    let img = new Image();
    img.onload = function () {
      context.drawImage(img, 10, 10);
    };
    img.src = 'image3.jpg';


  </script>

  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
  <script>
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");


    let x = 0;

    function animate() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = "blue";
      context.fillRect(x, 50, 50, 50);

      x += 2;
      if (x < canvas.width) {
        requestAnimationFrame(animate);
      }
    }

    animate();

  </script>