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">
    <link rel="stylesheet" type="text/css" href="/index.css">
    <meta charset="UTF-8">
    <div class="bg sprites sprite_338x338_gc4_ring"></div>
    <canvas id="myCanvas" width="338" height="338"></canvas>

        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);


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: