// from the font, then draw it to the canvas (both with the draw() method in

// opentype and by interpreting the path commands "by hand" with p5js drawing

// commands.)

​

let font;

let fontData;

​

function drawPathOutline(cmds) {

  // current pen position

  let cx = 0;

  let cy = 0;

  // start position of current contour

  let startX = 0;

  let startY = 0;

  for (let cmd of cmds) {

    if (cmd.hasOwnProperty('x')) {

        stroke(128, 16);

        line(cx, cy, 0, 100);

        line(cmd.x, cmd.y, 0, 100);

    }

    stroke(0);

    switch (cmd.type) {

      case 'M':

        startX = cmd.x;

        startY = cmd.y;

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'L':

        stroke(0);

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

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'C':

        stroke(0);

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

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'Q':

        beginShape();

        vertex(cx, cy);

        quadraticVertex(cmd.x1, cmd.y1, cmd.x, cmd.y);

        endShape();

        cx = cmd.x;

        cy = cmd.y;

        break;

      case 'Z':

        // to complete path

        stroke(0);

        line(cx, cy, startX, startY);

        break;

        }

  }

}

​

function preload() {

  fontData = loadBytes('LeagueGothic-Regular.otf');

}

​

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();

}