​

let font;

let fontData;

​

function drawPathOutline(cmds) {

  let cx = 0; cy = 0;

  for (let cmd of cmds) {

    switch (cmd.type) {

      case 'M':

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'L':

        let radius = max(abs(cmd.x - cx), abs(cmd.y - cy));

        ellipse((cx + cmd.x) / 2, (cy + cmd.y) / 2, radius);

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'C':

        quad(cx, cy, cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.y, cmd.y);

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'Q':

        line(cx, cy, cmd.x, cmd.y);

        endShape();

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'Z':

        break;

        }

  }

}

​

function preload() {

  fontData = loadBytes('Roboto-Black.ttf');

}

​

let path;

​

function setup() {

    createCanvas(400, 400);

  font = opentype.parse(fontData.bytes.buffer);

  path = font.getPath("Comptypo", 0, 0, 72);

}

​

function draw() {

  background(255);

  push();

  translate(50, 125);

  path.draw(drawingContext); // opentype.js

  pop();

  push();

    noFill();

  stroke(0);

  strokeWeight(2);

  translate(50, 225);

  drawPathOutline(path.commands); // p5js

  pop();

}