RTL-Aware DOM to Canvas Renderer – DOMRander

DOMRander is a dependency-free JavaScript DOM-to-Canvas renderer with dedicated handling for Persian, Arabic, RTL, mixed-direction, and Unicode text.

It reads browser text layout data before painting text to Canvas, which helps preserve shaping and joining that can break when Arabic-script characters are drawn individually.

DOM to Canvas Renderer is provided for viewing, evaluation, and execution purposes only.

Features

• Persian and Arabic text with RTL and LTR direction.
• Mixed RTL/LTR content, Unicode symbols, and browser font rendering.
• Background colors, linear gradients, borders, rounded corners, shadows, and opacity.
• CSS transforms and basic overflow clipping.
• Configurable Canvas scale and background color.
• Canvas, Data URL, and Blob output.

Use Cases

• Export Persian or Arabic text cards from browser-rendered HTML.
• Capture bilingual content containing RTL text, Latin text, numbers, and Unicode characters.
• Generate Canvas or Blob data for client-side downloads and image-processing workflows.

How To Use DOMRander

Installation

Load the core JavaScript in the document.

<script src="domrander.js"></script>

Basic Usage

Pass a DOM element to DOMRander.toCanvas(). The method returns a Promise that resolves to an HTMLCanvasElement.

<div id="capture-card">
  <h2>Hello World</h2>
  <p>This content will be rendered to canvas.</p>
</div>
<script src="domrander.js"></script>
<script>
  const element = document.getElementById('capture-card');
  DOMRander.toCanvas(element).then(canvas => {
    document.body.appendChild(canvas);
  });
</script>

Render Persian And RTL Text

Use normal HTML direction rules for RTL content. DOMRander reads the computed text direction and layout from the rendered DOM.

<div id="rtl-card" dir="rtl">
  <h2>سلام دنیا</h2>
  <p>فارسی + English + 123</p>
</div>
<script>
  const element = document.getElementById('rtl-card');
  DOMRander.toCanvas(element, {
    scale: 2
  }).then(canvas => {
    document.body.appendChild(canvas);
  });
</script>

Change the Output Resolution

scale defaults to 1. Values greater than zero multiply the Canvas pixel dimensions. Zero, negative, and non-numeric values fall back to 1.

const canvas = await DOMRander.toCanvas(
  document.getElementById('capture-card'),
  {
    scale: 2
  }
);
document.body.appendChild(canvas);

Set A Canvas Background Color

The Canvas starts transparent unless captured DOM backgrounds or backgroundColor paint it.

const canvas = await DOMRander.toCanvas(
  document.getElementById('capture-card'),
  {
    backgroundColor: '#ffffff'
  }
);

Export A Data URL

toDataURL() passes type and quality to the browser’s native Canvas encoder. PNG is the default format. quality applies to image formats whose encoder accepts lossy quality values.

const dataURL = await DOMRander.toDataURL(
  document.getElementById('capture-card'),
  {
    scale: 2,
    type: 'image/jpeg',
    quality: 0.9
  }
);
const link = document.createElement('a');
link.href = dataURL;
link.download = 'capture.jpg';
link.click();

Export A Blob

toBlob() uses the same export settings and resolves to a Blob.

const blob = await DOMRander.toBlob(
  document.getElementById('capture-card'),
  {
    scale: 2,
    type: 'image/png'
  }
);
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'capture.png';
link.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);

Public API

Rendering Options

• scale (number, default 1): Multiplies the Canvas pixel dimensions. Values that do not resolve to a positive number fall back to 1.
• backgroundColor (string | null, default null): Paints an explicit Canvas background before the DOM content is rendered.

Export Options

• type (string, default "image/png"): MIME type passed to the browser’s Canvas encoder. Unsupported formats fall back to PNG according to native Canvas behavior.
• quality (number, default 1): Quality value passed to the Canvas encoder. Use a value from 0 to 1 for lossy formats such as JPEG or WebP.

Alternatives & Related Resources

• snapDOM: Fast & Accurate DOM to Image Capture Library
• Convert HTML Into Image Using Canvas And SVG – nodeToDataURL
• Transform HTML Text Into Images – SnapText.js