Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?
We can use the canvas.toDataURL() method to capture HTML canvas content as different image formats like PNG, JPEG, WebP, and GIF. This method converts the canvas drawing into a data URL that can be saved or displayed as an image.
Syntax
canvas.toDataURL(type, encoderOptions)
Parameters
type (optional): The image format. Defaults to "image/png"
encoderOptions (optional): Quality setting for lossy formats (0-1)
Capture HTML Canvas as PNG
PNG format provides lossless compression and supports transparency. Set the type to image/png:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:2px solid #d3d3d3;"></canvas>
<button onclick="downloadPNG()">Download as PNG</button>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Draw a red rectangle
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);
// Draw some text
context.fillStyle = "blue";
context.font = "20px Arial";
context.fillText("Sample Canvas", 70, 40);
}
function downloadPNG() {
var canvas = document.getElementById("myCanvas");
var dataURL = canvas.toDataURL("image/png");
var link = document.createElement('a');
link.download = 'canvas.png';
link.href = dataURL;
link.click();
}
</script>
</body>
</html>
Capture HTML Canvas as JPEG
JPEG format is ideal for photographs but doesn't support transparency. You can specify quality (0-1):
<!DOCTYPE html>
<html>
<body>
<canvas id="jpegCanvas" width="300" height="170" style="border:2px solid #d3d3d3;"></canvas>
<button onclick="downloadJPEG()">Download as JPEG</button>
<script>
window.onload = function() {
var canvas = document.getElementById("jpegCanvas");
var context = canvas.getContext("2d");
// Create gradient background
var gradient = context.createLinearGradient(0, 0, 300, 170);
gradient.addColorStop(0, "lightblue");
gradient.addColorStop(1, "darkblue");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 170);
// Draw circle
context.fillStyle = "yellow";
context.beginPath();
context.arc(150, 85, 40, 0, 2 * Math.PI);
context.fill();
}
function downloadJPEG() {
var canvas = document.getElementById("jpegCanvas");
var dataURL = canvas.toDataURL("image/jpeg", 0.9); // 90% quality
var link = document.createElement('a');
link.download = 'canvas.jpg';
link.href = dataURL;
link.click();
}
</script>
</body>
</html>
Capture HTML Canvas as WebP
WebP provides better compression than JPEG and PNG with support for both lossy and lossless compression:
<!DOCTYPE html>
<html>
<body>
<canvas id="webpCanvas" width="300" height="170" style="border:2px solid #d3d3d3;"></canvas>
<button onclick="downloadWebP()">Download as WebP</button>
<script>
window.onload = function() {
var canvas = document.getElementById("webpCanvas");
var context = canvas.getContext("2d");
// Draw multiple shapes
context.fillStyle = "green";
context.fillRect(20, 20, 80, 60);
context.fillStyle = "orange";
context.beginPath();
context.arc(200, 50, 30, 0, 2 * Math.PI);
context.fill();
context.fillStyle = "purple";
context.beginPath();
context.moveTo(150, 120);
context.lineTo(200, 150);
context.lineTo(100, 150);
context.fill();
}
function downloadWebP() {
var canvas = document.getElementById("webpCanvas");
if (canvas.toDataURL("image/webp").indexOf("image/webp") === 5) {
var dataURL = canvas.toDataURL("image/webp", 0.8);
var link = document.createElement('a');
link.download = 'canvas.webp';
link.href = dataURL;
link.click();
} else {
alert("WebP not supported in this browser");
}
}
</script>
</body>
</html>
Comparison of Image Formats
| Format | File Size | Quality | Transparency | Browser Support |
|---|---|---|---|---|
| PNG | Large | Lossless | Yes | Excellent |
| JPEG | Small | Lossy | No | Excellent |
| WebP | Very Small | Both | Yes | Modern browsers |
Browser Compatibility
All modern browsers support PNG and JPEG export. WebP support varies:
// Check WebP support
function supportsWebP() {
var canvas = document.createElement('canvas');
return canvas.toDataURL('image/webp').indexOf('image/webp') === 5;
}
console.log('WebP supported:', supportsWebP());
Conclusion
Use canvas.toDataURL() to export canvas content as images. Choose PNG for graphics with transparency, JPEG for photographs, and WebP for the best compression when browser support allows.
3K+ Views
