https://github.com/pixijs/pixi.js/pull/6600

BitmapText doesn't render correctly because of the browser, not due to a flaw in the drawGlyph per say.

by ShukantPal

HTML

<canvas id="canvas" style="width:800px;height:800px;background-color:white;"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

canvas.width = 1600;
canvas.height = 1600;

context.font = "180px Impact";
context.strokeStyle = "#400080";
context.lineWidth = 20;
context.fontWeight = "bold";
context.shadowColor = "#707070";
context.shadowOffsetX = 15 / Math.sqrt(2);
context.shadowOffsetY = 15 / Math.sqrt(2);

var linearGrad = context.createLinearGradient(0,0,0,200);
linearGrad.addColorStop(0.25, "black");
linearGrad.addColorStop(0.5, "red");
linearGrad.addColorStop(0.75, "#80ff00");
linearGrad.addColorStop(1, "#8df9fe");

context.fillStyle = linearGrad;

context.strokeText("HELLO WORLD!", 0, 200)
context.fillText("HELLO WORLD!", 0, 200)