Set canvas width with text apply for all sprites

Asked Oct 08 '19 at 18:30

Active Oct 09 '19 at 11:05

Viewed 42 times

I am create some sprites and want to set width for everyone canvas, but width apply for all canvases and label is scaling

    function createSprite(message) {
            var fontsize = 4;
            var fontface = "Helvetica";
            var canvas = $doc.createElement('canvas');
            var context = canvas.getContext('2d');

            context.font = fontsize + "px " + fontface;
            var textWidth = context.measureText(message).width;

            canvas.width = textWidth
            context.font = fontsize + "px " + fontface;
            context.fillText(message, 0, fontsize);

            var texture = new $wnd.THREE.Texture(canvas)
            texture.minFilter = $wnd.THREE.LinearFilter;
            texture.needsUpdate = true;

            return new $wnd.THREE.SpriteMaterial({
                map: texture,
            });
}

I try calling context.beginPath(), but it does not work.

How can I fix it?

sprites now look like this

edited Oct 09 '19 at 11:05

asked Oct 08 '19 at 18:30

Vitaly Chuzhinov

1

Take a look at this [SO answer](https://stackoverflow.com/a/40452050/4045502) and its jsfiddle. – prisoner849 Oct 08 '19 at 19:33
Thanks for comment The problem is not the scaling of sprites, but the width of the canvas – Vitaly Chuzhinov Oct 09 '19 at 11:00
Take a look at this [fiddle](https://jsfiddle.net/prisoner849/jj26qz2L/) then. – prisoner849 Oct 09 '19 at 12:09

Set canvas width with text apply for all sprites

0 Answers0