HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptCritical

Capture HTML canvas as GIF/JPG/PNG/PDF?

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
capturecanvasjpghtmlgifpdfpng

Problem

Is it possible to capture or print what's displayed in an HTML canvas as an image or PDF?

I'd like to generate an image via canvas and be able to generate a PNG from that image.

Solution

Original answer was specific to a similar question. This has been revised:

const canvas = document.getElementById('mycanvas')
const img    = canvas.toDataURL('image/png')


With the value in img you can write it out as a new image like so:

document.getElementById('existing-image-id').src = img


or

document.write('');

Code Snippets

const canvas = document.getElementById('mycanvas')
const img    = canvas.toDataURL('image/png')
document.getElementById('existing-image-id').src = img
document.write('<img src="'+img+'"/>');

Context

Stack Overflow Q#923885, score: 860

Revisions (0)

No revisions yet.