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;
    }
}

My guess is that the canvas is using anti aliasing. The pixels on the boundary are neither blue nor pink - they are something in between. When you are drawing you are doing green for anything that is "not-pink" and so your drawing is bigger and cruder. — SQL Hacks, Dec 07 '17 at 20:41
@SQLHacks yes, but can I draw the alpha colors in ordet to get it smooth then? Now I have fillRect with color green, so where it maybe should be alpha values it is now green? — nickelman, Dec 07 '17 at 20:47
@nickelman please post your code. You most likely need to read the alpha value of each pixel, besides the color, and use that when drawing it back. — Gabriele Petrioli, Dec 07 '17 at 21:01

score 3 · Accepted Answer · answered Dec 07 '17 at 22:31

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>

Sweet, looks great. Thank you! – nickelman Dec 08 '17 at 10:06 — nickelman, Dec 08 '17 at 10:06

Draw text pixel by pixel on canvas

1 Answers1