วิธีบันทึก HTML Canvas เป็นรูปภาพด้วย canvas.toDataURL()

ใช้เมธอด toDataURL() เพื่อได้ URL ข้อมูลรูปภาพของ canvas มันแปลงการวาด (canvas) ให้เป็น URL เข้ารหัส 64-bit PNG

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อบันทึก canvas เป็นรูปภาพ:

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="newCanvas" width="450" height="300"></canvas>
    <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      // draw any shape
      ctx.beginPath();
      ctx.moveTo(120, 50);
      ctx.bezierCurveTo(130,100, 130, 250, 330, 150);
      ctx.bezierCurveTo(350,180, 320, 180, 240, 150);
      ctx.bezierCurveTo(320,150, 420, 120, 390, 100);
      ctx.bezierCurveTo(130,40, 370, 30, 240, 50);
      ctx.bezierCurveTo(220,7, 350, 20, 150, 50);
      ctx.bezierCurveTo(250,5, 150, 20, 170, 80);
      ctx.closePath();
      ctx.lineWidth = 3;
      ctx.fillStyle = '#F1F1F1';
      ctx.fill();
      ctx.stroke();
      var dataURL = canvas.toDataURL();
    </script>
  </body>
</html>