I want to make some Arabic-inspired designs but im having issues with how the text appears, written from left to right and disconnected.

let bg;
let str = "السلام عليكم";
var Diwani;

function preload() {
  Diwani = loadFont('DiwaniFont.ttf');
}

function setup() {
  bg = loadImage('pattern.png');
  createCanvas(400, 400);
}

function draw() {
  background(bg);
  textSize(40);
  textAlign(CENTER);
  stroke(255, 255, 255);
  strokeWeight(5);
  textFont(Diwani);
  text(str, 200, 200);
}

output

It's definitely not an issue with the font I am using. I tried others yet I still get the same result.

Is there a fix?