To turn numeric text or a number-based visualization into an image with JavaScript, draw it on an HTML canvas and export the canvas. Use toBlob() for large browser images, or toDataURL() when a compact data URL suits your use. If you already have a DOM element, SVG markup, or a Konva scene, choose an export method that matches that input instead.
Choose an export route based on what you have
| Starting point | Suitable route | Output and notes |
|---|---|---|
| Numeric text or shapes you are drawing in a browser | HTML canvas with toBlob() or toDataURL() |
Raster image. Canvas supports PNG by default; browsers may support JPEG or WebP as well. Unsupported requested formats fall back to PNG. MDN documents the export behavior. |
| An existing Konva scene | Konva Node.toImage() |
Asynchronous image export with options for MIME type, crop dimensions, and pixelRatio. See the Konva.Node API. |
| An existing DOM node | dom-to-image |
Project documentation describes SVG, PNG, and JPEG output. Check its current maintenance and compatibility before adopting it. See the project documentation. |
| SVG markup in a Node.js workflow | svg-to-img |
Its npm documentation describes PNG, JPEG, and WebP conversion, with optional sizing, quality, clipping, and background settings. Check package status and compatibility before use. See the package documentation. |
Draw numeric content on a canvas and export it
Canvas is the direct route when you are creating the image from scratch. Draw the number as text, add any desired shapes or labels, and export the finished canvas. This minimal browser example downloads a PNG:
const canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 180;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#222";
ctx.font = "bold 96px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("42", canvas.width / 2, canvas.height / 2);
canvas.toBlob((blob) => {
if (!blob) throw new Error("Canvas image export failed");
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "number.png";
link.click();
URL.revokeObjectURL(url);
}, "image/png");toBlob() is asynchronous, so handle its callback before using the result. The example revokes its temporary object URL after triggering the download; if your application needs the URL for longer, revoke it when it is no longer needed. For large outputs, MDN recommends toBlob() with URL.createObjectURL() rather than toDataURL(), which encodes the entire image as an in-memory string and can create performance or URL-length problems. MDN’s canvas export reference explains the data URL method and format behavior.
When to use a data URL instead
canvas.toDataURL() returns an encoded image data URL and is convenient when you specifically need the image represented as a string, for example to assign it to an image element’s src. PNG is the default. If you request another format, browser support can vary; an unsupported type falls back to PNG. For large images, prefer the blob route because the data URL holds the full encoded image in memory.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
Export a Konva scene
If the number is already part of a Konva scene, use its image export API rather than redrawing the scene manually. Node.toImage() is asynchronous and returns a Promise. Its options include MIME type, crop dimensions, and pixelRatio. The pixel ratio scales the exported dimensions: a 500 × 500 region exported at ratio 2 produces a 1000 × 1000 image. Konva’s API reference lists the available options.
Handle cross-origin images before exporting
A canvas that includes an image from another origin may be blocked from export by browser cross-origin security rules. If the relevant CORS conditions are not met, the canvas becomes tainted and image export fails. Check the image host’s CORS configuration and the way the image is loaded before drawing it. The dom-to-image project also documents this limitation. MDN explains cross-origin images and canvas and the project documentation describes its own constraints.
Rank #2
Use SVG when the output needs to stay scalable or editable
Canvas export produces raster output. If you need resolution-independent graphics or want to preserve editable vector markup, keep the result as SVG where your workflow supports it. The dom-to-image project documents SVG output for DOM nodes, while svg-to-img is a route for rasterizing existing SVG markup to image formats. These solve different starting-point problems; verify a package’s current compatibility before relying on it. dom-to-image documentation and svg-to-img documentation describe those routes.
If you mean plotting a number on a number line
“Number to image” can also mean visualizing a number mathematically rather than rendering numeric text. LNum.js describes a JavaScript class for plotting natural, whole, or rational numbers on a number line. It draws with HTML canvas and exposes the canvas as a base64-encoded image URL. It is a specific option for that visualization, not a general requirement for turning numbers into images. See the LNum.js project page.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
