Use the toDataURL() method to get the image data URL of the canvas. It converts the drawing (canvas) to a 64-bit encoded PNG URL.
You can try running the following code to save the canvas as an image −
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvasid = "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>The above is the detailed content of How to save HTML Canvas as image using canvas.toDataURL()?. For more information, please follow other related articles on the PHP Chinese website!
Computer is infected and cannot be turned on
What are the types of lasso tools in PS?
locallapstore
What does screen recording mean?
How to intercept harassing calls
Detailed explanation of java displacement operator
Introduction to commands for creating new files in Linux
WeChat Moments cannot be refreshed
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
