Plotting with a HTML canvas

WebR’s supporting R package includes a built in graphics device, webr::canvas(). When R uses this device, messages are sent to the main thread containing bitmap image data. The image data can then be displayed using a HTML Canvas element on the page.

A 2x scaling is used to improve the visual quality of the bitmap output. For the best results the width and height of the HTML canvas element displaying the final plot should be twice that of the graphics device. For example, the default arguments for webr::canvas() create a device with a width and height of 504, and so a correctly sized HTML canvas will have width and height attributes set to 1008.

The background colour for the plot can be set with the bg argument, and the text size may be changed by setting the pointsize argument.


The webr::canvas() graphics device relies on OffscreenCanvas support in the web browser or JavaScript engine running webR. A modern and up-to-date browser will be required for plotting with this device. Older browsers without OffscreenCanvas support should still be able to plot using the Cairo-based graphics devices, such as png().

Output Messages

The webr::canvas() graphics device emits webR output messages when triggered by certain events. The resulting output messages are of type Message with the type property set as 'canvas' and the data property populated with further details about the event that caused the message.

New plot page

When the graphics device creates a new page for plotting, a message is emitted of the form,

{ type: 'canvas', data: { event: 'canvasNewPage' } }

This message can be used as a signal to clear any existing plots, or create a new empty HTML canvas element.

Bitmap image data

When the graphics device is ready to send image data to the main thread for display, a message is emitted with the the image additionally included in the form of a JavaScript ImageBitmap object. The message emitted is of the form,

{ type: 'canvas', data: { event: 'canvasImage', image: ImageBitmap } }

Drawing the bitmap image data

Once the ImageBitmap data has been received by the main thread, it can be displayed on the containing web page. A HTML canvas element can be used to display the image data using its 2D rendering context. The HTML canvas element can be created dynamically by the running JavaScript environment, or it may already exist in the page.

Once a 2D rendering context has been obtained, the image data can be displayed using the drawImage() method.

Setting the default device

R’s default graphics device can be set so that webr::canvas() is always used for new plots. Before running any plotting code, evaluate the following R code to set the default device,

await webR.evalRVoid('options(device=webr::canvas)');

Text rendering and font support

When the webr::canvas() graphics device is used it is the web browser that handles the specifics of text rendering, and so any fonts installed on the host system can be used with the family argument when plotting. Modern features provided by the browser such as RTL text, ligatures, colour emoji, or the use of Arabic, Japanese or Cyrillic script should also be handled automatically.

The editable R code in this example demonstrates font and text features, feel free to experiment.

plot(rnorm(1000), rnorm(1000), col=rgb(0,0,0,0.5), xlim=c(-5, 5), ylim=c(-5, 5), main="This is the title 🚀", xlab="This is the x label", ylab="This is the y label", family="Comic Sans MS") text(-4, 4, "This is English", family="cursive") text(-4, -4, "هذا مكتوب باللغة العربية") text(4, 4, "これは日本語です") text(4, -4, "זה כתוב בעברית")

Example: Handling multiple plots

In the following fully worked example, multiple plots are handled by listening for 'canvasNewPage' events from the graphics device and dynamically adding new HTML canvas elements to the page.

      <title>WebR Multiple Plots Example</title>
    <h1>WebR Multiple Plots Example</h1>
    <p><div id="loading">Please wait, webR is loading...</div></p>
    <button id="plot-button" disabled="true">Run graphics demo</button>
    <p>See the JavaScript console for additional output messages.</p>
    <div id="plot-container"></div>
    <script type="module">
      import { WebR } from '';
      const webR = new WebR();
      let canvas = null;
      let loading = document.getElementById('loading');
      let container = document.getElementById('plot-container');
      let button = document.getElementById('plot-button');

      button.onclick = () => {


      (async () => {
        // Remove the loading message once webR is ready
        await webR.init();

        // Handle webR output messages in an async loop
        for (;;) {
          const output = await;
          switch (output.type) {
            case 'canvas':
              if ( === 'canvasImage') {
                // Add plot image data to the current canvas element
                canvas.getContext('2d').drawImage(, 0, 0);
              } else if ( === 'canvasNewPage') {
                // Create a new canvas element
                canvas = document.createElement('canvas');
                canvas.setAttribute('width', '1008');
                canvas.setAttribute('height', '1008');
       = "450px";
       = "450px";
       = "inline-block";

Click the button below to see the output of this demo,

Plotting with other graphics devices

In older browsers or JavaScript engines without OffscreenCanvas support, alternative graphics devices may still be used to produce plots. The following methods do not rely on direct rendering in the web browser, but instead the resulting image data is created entirely within the WebAssembly environment and written to the Emscripten virtual filesystem.

Bitmap graphics using Cairo for Wasm, e.g. png()

WebR may be built with bitmap graphics support though the use of a WebAssembly version of the Cairo graphics library and its prerequisites. This support is not enabled by default when building webR from source, as it significantly increases the output WebAssembly binary size and build time, but Cairo graphics support is explicitly enabled for the publicly available distributions of webR via CDN.

When webR is built with Cairo support the following graphics devices are available for use with R in the usual way:

Text rendering and font support

Unlike the HTML canvas device described in the previous section, rendering graphics entirely within the WebAssembly environment presents a challenge in that the sandbox does not have access to the font data installed in the host system. As such, fonts must be made available for use on the Emscripten virtual filesystem before plotting occurs.

When built with Cairo support, webR bundles a minimal selection of fonts. The Noto series of fonts was chosen for this purpose for its open licence and notably high support for internationalisation,

Access to font data is managed through a WebAssembly build of Fontconfig. The fonts bundled by webR support Latin, Cyrillic and Greek scripts, and additional fonts can be uploaded to the Emscripten virtual filesystem in the directory /home/web_user/fonts to allow for different typefaces or additional script support.

Vector graphics using pdf() and svglite()

Vector graphics can be produced with webR through use of the built-in pdf() graphics device, or through the svglite package, which can be installed in webR using the command webr::install("svglite").

Obtaining the plot data from the VFS

The contents of graphics output that has been written to the Emscripten virtual filesystem can be obtained as a JavaScript UInt8Array using the Filesystem API. The data can then be offered for display or download by working with the resulting ArrayBuffer.

In this example, a vector graphics plot is created using the pdf() graphics device, the contents of the file is read from the Emscripten virtual filesystem, and finally the PDF file is offered to the user via a download link.

    <title>WebR PDF Plot Download Example</title>
    <h1>WebR PDF Plot Download Example</h1>
    <p id="loading">Please wait, webR is working on producing a plot...</div>
    <p id="link-container"></p>
    <script type="module">
      import { WebR } from '';
      const webR = new WebR();
      await webR.init();

      // Create a PDF file containing a plot
      await webR.evalRVoid(`

      // Obtain the contents of the file from the VFS
      const plotData = await webR.FS.readFile('/home/web_user/Rplots.pdf');

      // Create a link for the user to download the file contents
      const blob = new Blob([plotData], { type: 'application/octet-stream' });
      const link = document.createElement('a'); = 'Rplots.pdf';
      link.href = URL.createObjectURL(blob);
      link.textContent = 'Click to download PDF';

      // Everything is ready, remove the loading message