<section id="screen">
</section>

<script>
  CSS.paintWorklet.addModule('https://codepen.io/Rumyra/pen/JLLoZo.js');
</script>
body {margin:0px; padding:0px;}

#screen {
  box-sizing: border-box;
  margin: 10px; padding: 0px;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  background-color: #111;
  background-image: paint(awesomePattern);
}
class Shape {
  paint(ctx, geom, properties) {
    
    let x = geom.width/2;
    let y = geom.height/2;

    ctx.strokeStyle = 'white';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.arc(x, y, 50, 0, 2*Math.PI);
    ctx.stroke();
    ctx.closePath();
    
  }
}

// Register our class under a specific name
registerPaint('awesomePattern', Shape);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.