- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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>
- Related Articles
- 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 array as a grayscale image with Matplotlib/Numpy?
- How to save an image with matplotlib.pyplot?
- How to save a canvas as PNG in Selenium?
- How to Move an Image in Tkinter canvas with Arrow Keys?
- How to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?
- 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 save an Image in OpenCV using C++?
- How to save HTML5 canvas data to file?
- How to save a Librosa spectrogram plot as a specific sized image?
- How to center an image in canvas Python Tkinter
- How to update an image in a Tkinter Canvas?
- How to save canvas data to file in HTML5?

Advertisements