HTML5 Canvas stroke text overlap joinning part in Arabic, Hindi, Bengali etc language

Question

In Arabic, Hindi, Bengali etc language, each letter joining each other while writing. But in HTML5 Canvas textStroke, these strokes are not joining. Is there any way to join these overlapping joining point?

Picture: Problem with an overlap of joining parts

Picture: These joining parts should be joined

var arabic = document.getElementById("arabic");
var ctx = arabic.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText(" اَلْعَرَبِيَّةُ ", 10, 100);


var hindi = document.getElementById("hindi");
var ctx = hindi.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText("हिन्दी", 10, 100);

var bengali = document.getElementById("bengali");
var ctx = bengali.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText("বেঙ্গলি", 10, 100);

JSFiddle example: https://jsfiddle.net/qa9t64bd/

user_12098706 · Answer

Custom Shadow Filter is no need to solve this problem. Just add ctx.globalCompositeOperation = "destination-out"; and then add fillText. It will automaticly clip the text stroke and fillText.

var arabic = document.getElementById("arabic");
var ctx = arabic.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText(" اَلْعَرَبِيَّةُ ", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText(" اَلْعَرَبِيَّةُ ", 10, 100);


var hindi = document.getElementById("hindi");
var ctx = hindi.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText("हिन्दी", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("हिन्दी", 10, 100);

var bengali = document.getElementById("bengali");
var ctx = bengali.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText("বেঙ্গলি", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("বেঙ্গলি", 10, 100);

canvas {
  background: #FFFF00;
}

JSFiddle Link - https://jsfiddle.net/1nc5owp7/1/

HTML5 Canvas stroke text overlap joinning part in Arabic, Hindi, Bengali etc language

1 Answers