Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style> 
text {
  font-size: 80px;
  font-weight: bold;
  paint-order: normal;
}
</style>
</head>
<body>
<h1>Change paint-order with JavaScript</h1>
<p>Click the "Try it" button to reverse the paint order for the text element so that stroke lines are drawn first, then text is filled.</p>
<button onclick="myFunction()">Try it</button>
<svg width="100%" height="150"><text
    x="30" y="80"
    id="colorfulText"
    fill="rgb(76,167,112)"
    stroke="purple"
    stroke-width="6">
    Thick header
  </text>
</svg>
<script>
function myFunction() {
  document.querySelector("text").style.paintOrder = "stroke fill";
}
</script>
</body>
</html>