I am currently working on a WebGL project. I am asked to configure text alignments as a Microsoft Word document as represented in Text Alignments.

So far, I have achieved 'left', 'right', and 'center' alignments by using Mozilla Documentation

I wonder if 'justify' can be achieved some how (last one in the text alignments picture).

My code snippet:

let randomText = "abcd"
let textAlignValue = "center"

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

ctx.font = '15px arial'; // pick font size and font family
ctx.clearRect(0, 0, textCanvas.width, textCanvas.height); // clear content
ctx.fillStyle = 'yellow'; // background color
ctx.fillRect(0, 0, textCanvas.width, textCanvas.height); // fill background
ctx.fillStyle = 'black'; // text color
ctx.textAlign = textAlignValue; // align text

ctx.fillText(randomText, textCanvas.width / 2, textCanvas.height / 2); // fill text