- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to save HTML Canvas as an Image with canvas.toDataURL()?
Use toDataURL() method to get the image data URL of the canvas. It converts the drawing (canvas) into a64 bit encoded PNG URL.
Example
You can try to run 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>
Published on 20-Mar-2018 11:14:11
- Related Questions & Answers
- How to save DIV as Image with HTM5 canvas to image with the extension?
- How to save DIV as Image with canvas2image with extension in HTML?
- How to save an image with matplotlib.pyplot?
- How to save an array as a grayscale image with Matplotlib/Numpy?
- How to save a canvas as PNG in Selenium?
- How to use an image as a link in HTML?
- How to specify an image as a client-side image-map in HTML?
- How to Move an Image in Tkinter canvas with Arrow Keys?
- How to save an Image in OpenCV using C++?
- Set an image as a server-side image map in HTML?
- How to save a Librosa spectrogram plot as a specific sized image?
- How to save HTML5 canvas data to file?
- How to center an image in canvas Python Tkinter
- How to update an image in a Tkinter Canvas?
- How to save an R data frame as txt file?
Advertisements