---
title: "PDF.js in Joomla: render a PDF on canvas - WebTolk websites development, Joomla Extensions"
description: "Register your own module with a dependency on the chosen asset. Here core provides Joomla.getOptions() ; addScriptOptions() passes the data. The HTML…"
url: "https://web-tolk.ru/en/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering"
date: "2026-10-09T19:21:38+00:00"
language: "en-GB"
---

## Breadcrumbs

[Home](https://web-tolk.ru/en) > [Joomla extensions](https://web-tolk.ru/en/dev) > [Joomla plugins](/en/dev/joomla-plugins) > [WT PDF.js](/en/dev/joomla-plugins/wt-pdf-js) > [Documentation](/en/dev/joomla-plugins/wt-pdf-js/documentation) > PDF.js in Joomla: render a PDF on canvas

# PDF.js in Joomla: render a PDF on canvas

WT PDF.js - Documentation

**Category:** [Joomla plugins](https://web-tolk.ru/en/dev/joomla-plugins)

[Project](https://web-tolk.ru/en/dev/joomla-plugins/wt-pdf-js)[Versions](https://web-tolk.ru/en/dev/joomla-plugins/wt-pdf-js/versions)[Documentation](https://web-tolk.ru/en/dev/joomla-plugins/wt-pdf-js/documentation)[GitHub](https://github.com/mozilla/pdf.js)

Register your own module with a dependency on the chosen asset.

## Load PDF.js and prepare the canvas

Register your own module with a dependency on the chosen asset. Here `core` provides `Joomla.getOptions()`; `addScriptOptions()` passes the data. The HTML document must render Joomla standard scripts sections. The custom .mjs URL starts from the site root through Uri::root(true), because standard Joomla WebAssetItem does not automatically resolve .mjs paths. Update your own asset version when changing the file to refresh its cache. Initial ES modules finish before `DOMContentLoaded`; the listener waits for it. For code injected after this event, explicitly `import()` the initializer and await completion.

This renders the first page with device pixel density taken into account. This preview displays a page image; the example does not implement a text layer, search or annotation UI. Multiple instances need unique script-option names, IDs and per-container handling. Adapt loading, rendering and cleanup for an interactive application.

### PHP example

```
<?php
use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
$document = Factory::getApplication()->getDocument();
$wa = $document->getWebAssetManager();
$document->addScriptOptions('wtpdf-demo', [
    'url' => Uri::root(true) . '/images/documents/catalog.pdf',
    'canvasId' => 'wtpdf-canvas',
    'errorId' => 'wtpdf-error',
    'cMapUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/cmaps/',
    'standardFontDataUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/standard_fonts/',
    'wasmUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/wasm/',
    'iccUrl' => Uri::root(true) . '/media/plg_system_wtpdfjs/viewer/modern/web/iccs/',
]);
$wa->registerAndUseScript(
    'com_example.pdf-preview',
    Uri::root(true) . '/media/com_example/js/pdf-preview.mjs',
    ['version' => '1.0.0'],
    ['type' => 'module'],
    ['core', 'wt-pdf-js']
);
?>
<canvas id="wtpdf-canvas" aria-label="PDF preview"></canvas>
<p id="wtpdf-error" role="status"></p>
```

### JavaScript example 2

```
// media/com_example/js/pdf-preview.mjs
window.addEventListener('DOMContentLoaded', async () => {
    const options = Joomla.getOptions('wtpdf-demo');
    const canvas = document.getElementById(options.canvasId);
    const error = document.getElementById(options.errorId);
    if (!canvas) return;
    let loadingTask;
    try {
        loadingTask = globalThis.pdfjsLib.getDocument({
            url: options.url,
            cMapUrl: options.cMapUrl,
            cMapPacked: true,
            standardFontDataUrl: options.standardFontDataUrl,
            wasmUrl: options.wasmUrl,
            iccUrl: options.iccUrl,
        });
        const pdf = await loadingTask.promise;
        const page = await pdf.getPage(1);
        const viewport = page.getViewport({ scale: 1.25 });
        const ratio = window.devicePixelRatio || 1;
        canvas.width = Math.ceil(viewport.width * ratio);
        canvas.height = Math.ceil(viewport.height * ratio);
        canvas.style.width = viewport.width + 'px';
        canvas.style.height = viewport.height + 'px';
        await page.render({
            canvasContext: canvas.getContext('2d'),
            viewport,
            transform: ratio === 1 ? null : [ratio, 0, 0, ratio, 0, 0],
        }).promise;
    } catch (exception) {
        if (error) error.textContent = exception.message;
    } finally {
        if (loadingTask) await loadingTask.destroy();
    }
}, { once: true });
```

For older browsers, use the `wt-pdf-js-legacy` dependency and replace `viewer/modern/` resource paths with `viewer/legacy/`. For CDN use `wt-pdf-js-latest`; CMaps, fonts, WASM and ICC must match its actual version. The example local resources are for 6.4.299.

PDF.js 6 expects an options object in `getDocument({ url: ... })`. The initializers preserve the older string call `pdfjsLib.getDocument(url)`, but use an object in new code. PDF loading parameters are separate from viewer JSON profiles.

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/en",
                "name": "Home"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/en/dev",
                "name": "Joomla extensions"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@id": "/en/dev/joomla-plugins",
                "name": "Joomla plugins"
            }
        },
        {
            "@type": "ListItem",
            "position": 4,
            "item": {
                "@id": "/en/dev/joomla-plugins/wt-pdf-js",
                "name": "WT PDF.js"
            }
        },
        {
            "@type": "ListItem",
            "position": 5,
            "item": {
                "@id": "/en/dev/joomla-plugins/wt-pdf-js/documentation",
                "name": "Documentation"
            }
        },
        {
            "@type": "ListItem",
            "position": 6,
            "item": {
                "name": "PDF.js in Joomla: render a PDF on canvas"
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "https://web-tolk.ru/images/webtolk-1080p.jpg",
                "contentUrl": "https://web-tolk.ru/images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk websites development, Joomla Extensions",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering",
            "name": "PDF.js in Joomla: render a PDF on canvas - WebTolk websites development, Joomla Extensions",
            "description": "Register your own module with a dependency on the chosen asset. Here core provides Joomla.getOptions() ; addScriptOptions() passes the data. The HTML…",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/TechArticle/base"
            },
            "inLanguage": "en-GB",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "TechArticle",
            "headline": "PDF.js in Joomla: render a PDF on canvas",
            "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering",
            "description": "Register your own module with a dependency on the chosen asset.",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "url": "https://web-tolk.ru/en/dev/joomla-plugins/wt-pdf-js/documentation/canvas-rendering"
            }
        }
    ]
}
```