Draw text pixel by pixel on canvas

Question

I have a canvas where I use "fillText" with a string, saying for example "stackoverflow". Then I read the imagedata of the canvas in order to pick out each pixel of that text.

I want to pick the following from the pixel: x position, y position and its color. Then I would like to loop over that array with those pixels so I can draw back the text pixel by pixel so I have full control of each pixel, and can for example animate them.

However, I dont get it as smooth as I want. Look at my attach image, and you see the difference between the top text and then the text I've plotted out using fillRect for each pixel. Any help on how to make the new text look like the "fillText" text does?

Thanks

UPDATE: Added my code

var _particles = [];
var _canvas, _ctx, _width, _height;

(function(){
    init();
})();

function init(){
    setupParticles(getTextCanvasData());
}

function getTextCanvasData(){
    // var w = 300, h = 150, ratio = 2;

    _canvas = document.getElementById("textCanvas");
    // _canvas.width = w * ratio;
    // _canvas.height = h * ratio;
    // _canvas.style.width = w + "px";
    // _canvas.style.height = h + "px";

    _ctx = _canvas.getContext("2d");
    _ctx.fillStyle = "rgb(0, 154, 253)";
    // _ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

    var str = "stackoverflow";
    _ctx.font = "32px EB Garamond";
    _ctx.fillText(str,0,23);

    _width = _canvas.width;
    _height = _canvas.height;

    var data32 = new Uint32Array(_ctx.getImageData(0, 0, _width, _height).data.buffer);
    var positions = [];

    for(i = 0; i < data32.length; i++) {

        if (data32[i] & 0xffff0000) {
            positions.push({
                x: (i % _width),
                y: ((i / _width)|0),
            });
        }
    }

    return positions;
}

function setupParticles(positions){
    var i = positions.length;
    var particles = [];
    while(i--){
        var p = new Particle();
        p.init(positions[i]);
        _particles.push(p);

        drawParticle(p);
    }
}

function drawParticle(particle){
    var x = particle.x;
    var y = particle.y;

    _ctx.beginPath();
    _ctx.fillRect(x, y, 1, 1);
    _ctx.fillStyle = 'green';
}

function Particle(){
    this.init = function(pos){
        this.x = pos.x;
        this.y = pos.y + 30;
        this.x0 = this.x;
        this.y0 = this.y;
        this.xDelta = 0;
        this.yDelta = 0;
    }
}

Answer 1

Here is an update to your code that reuses the alpha component of each pixel. There will still be some detail lost because we do not keep the antialiasing of the pixels (which in effect alters the actual color printed), but for this example the alpha is enough.

var _particles = [];
var _canvas, _ctx, _width, _height;

(function(){
    init();
})();

function init(){
    setupParticles(getTextCanvasData());
}

function getTextCanvasData(){
    // var w = 300, h = 150, ratio = 2;

    _canvas = document.getElementById("textCanvas");
    // _canvas.width = w * ratio;
    // _canvas.height = h * ratio;
    // _canvas.style.width = w + "px";
    // _canvas.style.height = h + "px";

    _ctx = _canvas.getContext("2d");
    _ctx.imageSmoothingEnabled= false;
    _ctx.fillStyle = "rgb(0, 154, 253)";
    // _ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

    var str = "stackoverflow";
    _ctx.font = "32px EB Garamond";
    _ctx.fillText(str,0,23);

    _width = _canvas.width;
    _height = _canvas.height;

    var pixels = _ctx.getImageData(0, 0, _width, _height).data;
    var data32 = new Uint32Array(pixels.buffer);
    var positions = [];
        for(i = 0; i < data32.length; i++) {
        if (data32[i] & 0xffff0000) {
            positions.push({
                x: (i % _width),
                y: ((i / _width)|0),
                a: pixels[i*4 + 3] / 255
            });
        }
    }

    return positions;
}

function setupParticles(positions){
    var i = positions.length;
    var particles = [];
    while(i--){
        var p = new Particle();
        p.init(positions[i]);
        _particles.push(p);

        drawParticle(p);
    }
}

function drawParticle(particle){
    var x = particle.x;
    var y = particle.y;

    _ctx.beginPath();
    _ctx.fillStyle = `rgba(0,128,0,${particle.alpha})`;
    
    _ctx.fillRect(x, y, 1, 1);
}

function Particle(){
    this.init = function(pos){
        this.x = pos.x;
        this.y = pos.y + 30;
        this.x0 = this.x;
        this.y0 = this.y;
        this.xDelta = 0;
        this.yDelta = 0;
        this.alpha = pos.a;
    }
}

<canvas id="textCanvas"></canvas>