DOMRander

Features

• HTML to Canvas rendering
• Persian and Arabic text support
• RTL and LTR text direction
• Mixed RTL/LTR content
• Unicode and special characters
• Browser font rendering
• Background colors
• Linear gradients
• Borders
• Border radius
• Box shadows
• Opacity
• CSS transforms
• Basic overflow clipping
• PNG export
• Blob export
• Dependency-free
• Browser-based
• Simple API
• Built-in playground for testing

Why DOMRander?

DOM-to-image rendering can become especially difficult when working with Persian and Arabic text.

Rendering text character by character can break Arabic shaping, joining behavior, and bidirectional text layout.

DOMRander uses browser text layout information and renders text segments as complete strings instead of drawing individual characters separately.

This allows Persian and Arabic text to preserve their natural shaping and joining behavior.

Installation

No package manager or external dependency is required.

Download domrander.js and include it in your HTML:

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

Basic Usage

<div id="content">
    Hello World
</div>

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

<script>
    const element = document.getElementById("content");

    DOMRander.toCanvas(element).then(canvas => {
        document.body.appendChild(canvas);
    });
</script>

Persian and RTL

DOMRander supports Persian and Arabic text while preserving browser-based text shaping.

<div id="content" dir="rtl">
    سلام دنیا
</div>

<script>
    const element = document.getElementById("content");

    DOMRander.toCanvas(element, {
        scale: 2
    }).then(canvas => {
        document.body.appendChild(canvas);
    });
</script>

Mixed RTL and LTR

Mixed-direction content can also be rendered:

<div id="content" dir="rtl">
    فارسی + English + 123
</div>

Unicode and Persian Testing

DOMRander can be tested with content such as:

سلام دنیا 👋
برنامه‌نویسی فارسی
فارسی + English + 123
RTL ← → LTR
فؤاد
★ ☆ ♥ ♠ ♣

These examples are useful for testing:

• Persian text shaping
• Arabic joining
• RTL direction
• LTR direction
• Mixed-direction text
• Numbers
• Unicode symbols
• Emoji
• Special characters

Screenshots

Screenshots from the App UI and Export Output

API

DOMRander.toCanvas()

Renders a DOM element to an HTML Canvas element.

const canvas = await DOMRander.toCanvas(element);

With options:

const canvas = await DOMRander.toCanvas(element, {
    scale: 2,
    backgroundColor: "#ffffff"
});

DOMRander.toDataURL()

Returns the rendered result as a Data URL.

const dataURL = await DOMRander.toDataURL(element);

Example:

const link = document.createElement("a");

link.href = await DOMRander.toDataURL(element);
link.download = "render.png";
link.click();

DOMRander.toBlob()

Returns the rendered result as a Blob.

const blob = await DOMRander.toBlob(element);

Example:

const blob = await DOMRander.toBlob(element);

const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "render.png";
link.click();

URL.revokeObjectURL(url);

Options

The renderer currently supports the following options:

{
    scale: 1,
    backgroundColor: null
}

scale

Controls the output resolution.

const canvas = await DOMRander.toCanvas(element, {
    scale: 2
});

A higher scale produces a higher-resolution canvas.

backgroundColor

Defines an optional canvas background color.

const canvas = await DOMRander.toCanvas(element, {
    backgroundColor: "#ffffff"
});

Use null to keep the background transparent when possible.

Saving as PNG

The playground can export the DOMRander Canvas result as a PNG image.

const canvas = await DOMRander.toCanvas(element, {
    scale: 2
});

const link = document.createElement("a");

link.download = "domrander-output.png";
link.href = canvas.toDataURL("image/png");

link.click();

The downloaded PNG is the actual rendered output produced by DOMRander.

Playground

DOMRander includes a browser playground for testing HTML and CSS.

The playground provides:

• HTML input
• CSS input
• Browser preview
• DOMRander Canvas output
• Rendering controls
• PNG export
• Engine download

The playground is separated from the renderer itself.

DOMRander/
├── index.html
├── app.js
├── domrander.js
├── LICENSE
└── README.md

The core renderer does not contain playground-specific logic.

Rendering Approach

DOMRander relies on the browser's own DOM and text layout engine to obtain rendering information.

For text rendering, it uses browser layout information instead of treating every character as an independent drawing operation.

This is particularly important for scripts such as Persian and Arabic where characters can change their shape depending on their position and surrounding characters.

The renderer also uses browser font information and waits for document fonts before starting the rendering process.

Current Scope

DOMRander version 1.0.0 focuses on the following rendering capabilities:

• HTML elements
• CSS styling
• Persian
• Arabic
• RTL
• LTR
• Mixed text directions
• Unicode
• Fonts
• Backgrounds
• Gradients
• Borders
• Border radius
• Box shadows
• Opacity
• Transforms
• Basic clipping
• Canvas output
• PNG export
• Data URL output
• Blob output

Roadmap

Possible future improvements include:

• Image rendering
• Pseudo-elements
• ::before and ::after
• Input rendering
• Textarea rendering
• Font Awesome support
• More advanced clipping
• More accurate CSS support
• More complex Unicode and bidi handling
• Additional browser compatibility improvements

Browser Support

DOMRander is designed for modern browsers that support:

• HTML Canvas
• DOM APIs
• Range
• getBoundingClientRect()
• CSS computed styles
• document.fonts
• Modern JavaScript

Contributing

DOMRander is currently distributed under a custom proprietary license.

The source code may be viewed and executed according to the terms defined in the LICENSE file.

Contributions, modifications, redistribution, and derivative works require prior written permission from the copyright owner.

Author

Fouad Salehi

License

DOMRander is proprietary software, not open source. You may view and run the project for personal or evaluation purposes only. Copying, modifying, or redistributing any part of the project is not permitted without prior written permission.

See the LICENSE file for the complete terms.

Copyright

Copyright © 2026 Fouad Salehi. All rights reserved.