0

As the title suggests, I am trying to simulate p5.js fontToPoints method in regular JavaScript, as I don't want to use their library.

I have no idea how I can even begin to do this though, I have created a canvas, and displayed text on that canvas, however I want to be able to get the points around that canvas that outline the text, and I want that in an array. However, no clue...

For an example of what Im looking for...

textToFont example for 'train'

My current code attempt that simply outlines the text...

function setCanvas() {
let windowWidth = $(window).width();
let windowHeight = $(window).height()

let title = document.getElementById("title").innerText;

canvas.width = windowWidth;
canvas.height = windowHeight * 0.3;

ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';

ctx.textAlign = "center";
ctx.font = "100px Montserrat";
ctx.strokeText(title, canvas.width/2, canvas.height/2);

ctx.fill();
ctx.stroke();
}

How would I go about doing this?

James Andrew
  • 197
  • 1
  • 4
  • 16
  • looks like a duplicate of: https://stackoverflow.com/questions/12700731/extract-path-from-text-html-canvas – offwhite Jun 13 '18 at 12:30
  • Similar, very similar, except not quite what Im looking for. I just want the outline of the text, that doesnt seem to outline the text, but moreso fill it in with circles. As in, its rather bulky... – James Andrew Jun 13 '18 at 12:36
  • Why don't you want to use P5.js? And where are you seeing the `fontToPoints()` function? – Kevin Workman Jun 13 '18 at 16:06
  • run this `p5.Font.prototype.textToPoints.toString()` in the Console and copy theirs study it, and then implement your own. – Rainbow Jun 13 '18 at 16:17

1 Answers1

0

textToPoints: you'll need to import the 'opentype.js' library, then for each character, get the glyph from the opentype font, get the path from the glyph, get the command list from the path and then simulate traversing along each section of the path with a given point separation.

Spongman
  • 9,665
  • 8
  • 39
  • 58