Skip to content

How to print a canvas to a data URL

Data URLs are a useful feature provided by browsers.

We can have an image that instead of referencing a file system file, like

<img src="image.png" />

it embeds the image in the HTML itself, something like this:

<img src="data:image/png;base64,iVBORw0KGgoAA…" />

where the garbage part that's composed by seemingly random letters and numbers is very long.

I was playing with the Canvas API to generate an image dynamically, and I stumbled upon the toDataURL() method of the Canvas object:

canvas.toDataURL()

I think that this is especially useful when you create a server-side image and you want to serve it in a web page, server-side generated.

All from a Node.js process.

In particular, using the canvas npm package we can initialize a canvas:

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

draw into it, using for example ctx.fillText('Hello, World!', 50, 100) and then call canvas.toDataURL() to generate the data URL for an image which we can then append to the HTML in a string, like this:

const imageHTML = '<img src="' + canvas.toDataURL() + '" />'

You can do the same on the frontend, of course, except now the canvas object is a reference to a <canvas> HTML element you are drawing to:

const canvas = document.getElementById('canvas')
//…
const imageHTML = '<img src="' + canvas.toDataURL() + '" />'
→ Download my free Node.js Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about node: