usage with ImageData?

[nickdesaulniers]

Is it possible to use this library to generate SDF's for text? I have something like:

var ndarray = require('ndarray');
var sdf = require('./dt');

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FFFFFF';
ctx.font = '24pt Arial';
ctx.fillText('hello world', 20, 20);

var ar = ndarray(ctx.getImageData(0, 0, canvas.width, canvas.height).data,
  [canvas.width, canvas.height, 4]);

sdf(ar)

var ctx2 = document.createElement('canvas').getContext('2d');
var d = new ImageData(ar.data, canvas.width, canvas.height);
ctx2.putImageData(d, 0, 0);

document.addEventListener('DOMContentLoaded', function () {
  document.body.appendChild(canvas);
  document.body.appendChild(ctx2.canvas);
});

While this doesn't error, it also doesn't create the SDF image I was expecting (all white).

Is using this w/ ImageData possible or do I need to pack the data into zeros and ones for "black" vs "white" pixels (such an array would be one fourth the length)?

[mikolalysenko]

I think the issue is that you are applying the distance transform on a 3D ndarray, when you really just want to do this on a single channel. Because the alpha channel is non-zero, you are basically going to be computing the distance in 3D to the alpha channel per component. A way to fix this would be to maybe take just the red channel of your image. For example,

ar = ar.pick(null, null, 0)