RNAcanvas Code is a complete re-writing of the RNAcanvas app from the ground up.

Two of the main goals of RNAcanvas Code are:

• Complete drawing flexiblity
• A code interface

Feel free to send any questions to [email protected] or open an issue on GitHub.

In progress:

Some features that RNAcanvas Code doesn't have (yet)...

• (Curved) tertiary bonds
• Support for Leontis-Westhof bond notations (i.e., strung elements)
• A GUI form to aid coloring / outlining bases according to chemical probing data

Custom GPT

Perhaps, the most straightforward way to learn more about the RNAcanvas Code app and its codebase is to ask questions to the RNAcanvas GPT.

(The RNAcanvas GPT has been trained on the RNAcanvas Code codebase.)

Of course, the RNAcanvas GPT may make mistakes sometimes.

Video guides

Check out the RNAcanvas video guides for demos of some tasks.

Code interface

RNAcanvas Code can be interacted with using the web browser console.

Opening the web browser console

Usually the web browser console can be opened by pressing Ctrl+Shift+I (or Option+Command+I on Mac) and going to the Console tab.

By default, RNAcanvas initializes certain variables within the global JavaScript environment (such as a reference to the RNAcanvas app object).

Closing the Start page

To close the Start page (the page that is shown when first opening the app) and view the current drawing, use the close() method.

app.startPage.close();

Drawing a structure

In general, the draw() method of the RNAcanvas app object tries to support common sequence and nucleic acid structure formats.

app.draw(`
  AGAGUAGCAUUCUGCUUUAGACUGUUAACUUUAUGAACCACGCGUGUCACGUGGGGAGAGUUAACAGCGCCC
  (((((((....)))))))...(((((((((((.....(((((.......)))))..))))))))))).....
`);

// ensure that the drawing is large enough for the drawn structure
app.drawing.setPadding(1000);

// close the Start page if it's still open
app.startPage.close();

// reshow the peripheral UI (e.g., the Toolbar) in case it was hidden
app.peripheralUI.show();

// fit the user's view of the drawing to the drawn structure
app.view.fitTo(app.drawing.contentBBox.padded({ percentage: 10 }));

A full list of supported input formats can be found here.

RNAcanvas generally tries to support things along the lines of:

• Copying and pasting a structure from the RNAfold results page
• Dropping a CT file generated by mfold
• Copying and pasting sequence(s) from GenBank

Tip: Multiple sequences / structures can be drawn in a single drawing.

Drawing an RNA 2D schema

RNA 2D schemas are utilized by software tools such as R2DT).

RNA 2D schemas are particularly useful for drawing ribosomal RNA structures.

// a URL to an RNA 2D schema
var schemaURL = 'https://www.ebi.ac.uk/Tools/services/rest/r2dt/result/r2dt-R20260527-022930-0302-23477155-p1m/json';

fetch(schemaURL)
  .then(response => response.text())

  // draw the schema
  .then(text => app.drawSchema(JSON.parse(text)))

  // ensure the drawing is big enough to fit the drawn structure
  .then(() => app.drawing.setPadding(1000))

  // close the Start page if it is open
  .then(() => app.startPage.close())

  // reshow the peripheral UI (in case it was hidden)
  .then(() => app.peripheralUI.show())

  // fit the user's view of the drawing to the drawn structure
  .then(() => app.view.fitTo(app.drawing.contentBBox.padded({ percentage: 10 })));

Note that this method may throw for invalid schemas, in which case the drawing of the app may be left in a partially drawn state (e.g., with only part of a schema having been drawn).

Editing and styling drawing elements

Attributes and properties of drawing elements can be directly accessed and set.

// make all U's lowercase and red
[...app.drawing.bases].filter(b => b.textContent === 'U').forEach(b => {
  b.textContent = 'u';
  b.setAttribute('fill', 'red');
});

// trace the sequence of the structure
[...app.drawing.primaryBonds].forEach(pb => {
  pb.set({
    basePadding1: 0,
    basePadding2: 0,
    attributes: {
      'stroke': 'blue',
      'stroke-width': '2',
      'stroke-linecap': 'round',
    },
  });
});

// give all secondary bonds a line thickness of 3 and rounded ends
[...app.drawing.secondaryBonds].forEach(sb => {
  sb.setAttributes({
    'stroke-width': '3',
    'stroke-linecap': 'round',
  });
});

Controlling the layout of bases

The @rnacanvas/layout package provides key functionality for arranging the bases in a drawing.

// all bases in the drawing
var bases = [...app.drawing.bases];

// shift the bases by the given vector
shift(bases, { x: 500, y: -350 });

// rotate the bases by 120 degrees clockwise
rotate(bases, 2 * Math.PI / 3);

// represents the central point of all bases
var centroid = new Centroid(bases);

// recenter the bases at (912, 204)
centroid.set({ x: 912, y: 204 });
centroid.get(); // { x: 912, y: 204 }

// all base-pairs in the secondary structure of the drawing
var basePairs = [...app.drawing.secondaryBonds].map(sb => [...sb.basePair]);

// apply the RNAcanvas untangling algorithm
untangle(bases, basePairs, { spacing: 20, basePairSpacing: 10, hairpinLoopSpacing: 10 });

Exporting a drawing

Drawings can be directly exported in SVG format (within the web browser RNAcanvas drawings are SVG images).

SVG images are vector graphics images and can be opened (and edited further) in vector graphics softwares such as Adobe Illustrator and Inkscape.

// create a downloadable file containing the SVG content of the drawing
var file = new DownloadableFile('Drawing.svg', app.drawing.outerXML, { type: 'text/plain' });

// download the drawing
file.download();