How to get sharp text in HTML5 canvas, rotating with Javascript

Question

I'm using HTML5 canvas alongside some Javascript to produce a rotating 3D sphere of text links ( source ).

HTML:

<div id="myCanvasContainer">
    <canvas id="myCanvas" width="800" height="800" style="margin: 0 auto; display: block; padding:20px 0;">
      <ul>
        <a href="#">John Cage</a>
        <a href="#">Morton Feldman</a>
        <a href="#">Steve Reich</a>
        <a href="#">John Adams</a>
        <a href="#">Philip Glass</a>
        <a href="#">Arthur Russell</a>
        <a href="#">Brian Eno</a>
        <a href="#">Richard James</a>
      </ul>
   </canvas>

Javascript init file:

window.onload = function() {

    try {
    TagCanvas.textColour = '#000000';
    TagCanvas.textHeight = 20;
    TagCanvas.outlineColour = '#330000';
    TagCanvas.outlineMethod = 'colour';
    TagCanvas.radiusX = 0.9;
    TagCanvas.radiusY = 0.9;
    TagCanvas.radiusZ = 0.9;
    TagCanvas.depth = 0.5;
    TagCanvas.shuffleTags = true;
    TagCanvas.maxSpeed = 0.01;
    TagCanvas.txtOpt = true;
    TagCanvas.wheelZoom = false;
    TagCanvas.shape = "sphere";
    TagCanvas.textFont =  null;
    TagCanvas.Start('myCanvas');
    } catch(e) {
         document.getElementById('myCanvasContainer').style.display = 'none';
    }
};

This is fixed-width for now, so no interpolation or width changes. Zooming is switched off. I'm looking to get sharper text than is shown below. Setting textFont to null means it using the default font of the page. It seems a bit blurry compared to the default text. Is it possible to get it sharper? How would I do it?

Answer 1

I have suggested you to use SVG instead of Canvas. Since SVG is not affected while zooming.