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 Convert Canvas Graphics to Image?
HTML canvas graphics provide lots of options to create versatile objects. While working with Canvas you might want to convert the graphics into real images which you can download or print. This article will help you create graphics and save them as image files on your device.
The process involves creating graphics on an HTML5 <canvas> element, then using the toDataURL() method to convert the canvas content into a downloadable image format (PNG by default).
Syntax
Following is the syntax for converting canvas to image using toDataURL() method
canvas.toDataURL(type, quality);
Parameters:
type (optional) Image format like "image/png", "image/jpeg", "image/webp". Default is "image/png".
quality (optional) Number between 0 and 1 for image quality (JPEG only). Default is 0.92.
Converting Simple Canvas Graphics
The basic process involves drawing graphics on canvas, then using toDataURL() to convert the canvas content into a data URL that can be downloaded as an image file.
Algorithm
Step 1: Create graphics on the canvas using 2D rendering context methods.
Step 2: Get the canvas element by its ID.
Step 3: Use canvas.toDataURL() to convert canvas content to a data URL.
Step 4: Create a temporary anchor element and set its href to the data URL.
Step 5: Set the download attribute with desired filename.
Step 6: Programmatically click the anchor to trigger download.
Example
Following example creates a red square on canvas and provides a button to download it as PNG image
<!DOCTYPE html>
<html>
<head>
<title>Canvas to Image Conversion</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Simple Canvas to Image</h2>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid #ccc;"></canvas>
<br><br>
<button onclick="drawAndConvert()" style="padding: 10px 15px;">Draw & Convert to Image</button>
<script>
function drawAndConvert() {
// Get the canvas element
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw a red square on the canvas
context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);
// Convert canvas to image and download
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'red_square.png';
link.click();
}
</script>
</body>
</html>
The output shows a canvas with a gray border. Clicking the button draws a red square and automatically downloads it as "red_square.png"
Simple Canvas to Image [200x200 canvas with gray border] [Draw & Convert to Image] (button)
Converting Complex Canvas Graphics
For more complex graphics with multiple shapes, colors, and effects, the same conversion method applies. Let's create a more elaborate drawing before converting it to an image.
Example Complex Graphics
Following example creates a colorful scene with multiple shapes and converts it to downloadable image
<!DOCTYPE html>
<html>
<head>
<title>Complex Canvas to Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Complex Graphics Conversion</h2>
<canvas id="complexCanvas" width="300" height="250" style="border: 1px solid #ccc;"></canvas>
<br><br>
<button onclick="drawComplex()" style="padding: 10px 15px; margin-right: 10px;">Draw Scene</button>
<button onclick="downloadImage()" style="padding: 10px 15px;">Download Image</button>
<script>
function drawComplex() {
const canvas = document.getElementById('complexCanvas');
const ctx = canvas.getContext('2d');
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw sky background
ctx.fillStyle = '#87CEEB';
ctx.fillRect(0, 0, 300, 150);
// Draw ground
ctx.fillStyle = '#90EE90';
ctx.fillRect(0, 150, 300, 100);
// Draw sun
ctx.fillStyle = '#FFD700';
ctx.beginPath();
ctx.arc(250, 50, 30, 0, 2 * Math.PI);
ctx.fill();
// Draw house
ctx.fillStyle = '#8B4513';
ctx.fillRect(80, 120, 80, 80);
// Draw roof
ctx.fillStyle = '#DC143C';
ctx.beginPath();
ctx.moveTo(75, 120);
ctx.lineTo(120, 80);
ctx.lineTo(165, 120);
ctx.closePath();
ctx.fill();
// Draw door
ctx.fillStyle = '#654321';
ctx.fillRect(110, 160, 20, 40);
// Draw tree
ctx.fillStyle = '#8B4513';
ctx.fillRect(40, 140, 10, 60);
ctx.fillStyle = '#228B22';
ctx.beginPath();
ctx.arc(45, 140, 20, 0, 2 * Math.PI);
ctx.fill();
}
function downloadImage() {
const canvas = document.getElementById('complexCanvas');
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'house_scene.png';
link.click();
}
</script>
</body>
</html>
This example creates a colorful scene with sky, ground, sun, house, and tree. The "Draw Scene" button renders the graphics, and "Download Image" saves it as PNG
Complex Graphics Conversion [300x250 canvas showing house scene with sky, sun, house, and tree] [Draw Scene] [Download Image] (buttons)
Image Format Options
The toDataURL() method supports different image formats. You can specify the format and quality as parameters.
Example Different Image Formats
<!DOCTYPE html>
<html>
<head>
<title>Canvas Image Formats</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Download in Different Formats</h2>
<canvas id="formatCanvas" width="200" height="150" style="border: 1px solid #ccc;"></canvas>
<br><br>
<button onclick="drawCircle()" style="padding: 8px 12px; margin-right: 5px;">Draw Circle</button>
<button onclick="downloadPNG()" style="padding: 8px 12px; margin-right: 5px;">PNG</button>
<button onclick="downloadJPEG()" style="padding: 8px 12px; margin-right: 5px;">JPEG</button>
<button onclick="downloadWEBP()" style="padding: 8px 12px;">WEBP</button>
<script>
function drawCircle() {
const canvas = document.getElementById('formatCanvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Create gradient
const gradient = ctx.createRadialGradient(100, 75, 0, 100, 75, 60);
gradient.addColorStop(0, '#FF6B6B');
gradient.addColorStop(1, '#4ECDC4');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(100, 75, 60, 0, 2 * Math.PI);
ctx.fill();
}
function downloadPNG() {
const canvas = document.getElementById('formatCanvas');
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'circle.png';
link.click();
}
function downloadJPEG() {
const canvas = document.getElementById('formatCanvas');
const link = document.createElement('a');
link.href = canvas.toDataURL('image/jpeg', 0.9);
link.download = 'circle.jpg';
link.click();
}
function downloadWEBP() {
const canvas = document.getElementById('formatCanvas');
const link = document.createElement('a');
link.href = canvas.toDataURL('image/webp', 0.9);
link.download = 'circle.webp';
link.click();
}
</script>
</body>
</html>
This example allows downloading the same canvas graphics in PNG, JPEG, or WEBP format with different quality settings.
Key Points
toDataURL() method Converts canvas content to a base64-encoded data URL string.
Image formats Supports
6K+ Views
