Idea is to display image as a "brush", which means instead of black (or any other color) line to have image.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/index.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg sprites sprite_338x338_gc4_ring"></div>
<canvas id="myCanvas" width="338" height="338"></canvas>
</body>
<script>
var myImage = new Image();
myImage.src = "338x338_repeating_gc4_dim_hatch.png";
myImage.onload = function () {
var myCvns = document.getElementById("myCanvas");
var myCntx = myCvns.getContext("2d");
var pat = myCntx.createPattern(myImage, "no-repeat");
myCntx.lineWidth = 10;
//myCntx.strokeStyle = "red";
myCntx.strokeStyle = pat;
myCntx.arc(168, 170, 165, 0, 8, false);
myCntx.stroke();
}
</script>
</html>
Notice line:
myCntx.strokeStyle = pat;
With that we are actually using our pattern to display image. Instead of pat write "red", for example, to see the difference.
Live example: