EN
JavaScript - capture HTML canvas as png image
0
points
In this article, we would like to show you how to capture HTML canvas as png image using JavaScript.
Quick solution:
var canvas = document.querySelector('#my-canvas');
var image = new Image();
image.src = canvas.toDataURL('image/png');
document.body.appendChild(image);
Practical example
In this example, we use toDataURL() method to get the data URI containing a representation of the canvas and set it as the src property of the new image.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<div>Canvas:</div>
<canvas id="my-canvas" width="200" height="200"></canvas>
<div>Image:</div>
<script>
// Draw rectangles on canvas ----------------------------------------------------
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(20,20,75,75);
context.fillStyle = 'blue';
context.fillRect(75,75,75,75);
// Capture canvas as png image ---------------------------------------------------
var image = new Image();
image.src = canvas.toDataURL('image/png');
document.body.appendChild(image);
</script>
</body>
</html>