<canvas id="roughcanvas" class="roughcanvas">
    </canvas>

    </body>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1281712/rough.js"></script>
.roughcanvas {
        overflow: hidden; 
        width: 99vw; 
        height: 50vh;
}

import { TilerTheCreator } from 'https://codepen.io/bryanrasmussen/pen/xxwRKOK.js';

const setCanvas = () => {
      
  const canvas = document.getElementById('roughcanvas');
  const canvasW = canvas.width;
  const canvasH = canvas.height;
  const roughCanvas = rough.canvas(canvas);
  const ctx = canvas.getContext('2d');

  const roughJSTiling = new TilerTheCreator({width: window.innerWidth, height: window.innerHeight, scale_factor: 50, type: 77});
      roughJSTiling.readyToTile();
      const polygons = roughJSTiling.getPolygonsFromRegion();
      const getX = (polygon) => {
            return polygon.map(p => p[0]);
      } 
      const getY = (polygon) => {
            return polygon.map(p => p[1]);
      }
       
      
      
 const image = new Image();
  image.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1281712/redstar.png';
  image.addEventListener('load', () => {


        polygons.forEach((polygon) => {
            const polygonX = getX(polygon);
            const polygonY = getY(polygon);
            const xmin = Math.min( ...polygonX );
            const xmax = Math.max( ...polygonX );
            const ymin = Math.min( ...polygonY );
            const ymax = Math.max( ...polygonY );
            const dx = (xmin+xmax) / 2;
            const dy = (ymin+ymax) / 2;
 ctx.drawImage(image, dx - 12.5, dy - 12.5, 25, 25);           roughCanvas.circle(dx, dy, 30, {fill: 'blue'});
const canvasDivisions = canvasW / 3;
const canvasMiddle = canvasDivisions + canvasDivisions;
const pointPlacement = (dx < canvasDivisions) ? "start" : (dx < canvasMiddle) ? "middle" : "end";
const styling = {};
styling.fill = (pointPlacement === "middle") ? "#8aea92" : "#80ada0";
styling.hachureAngle = (pointPlacement === "middle") ? 180 : 90;
styling.hachureGap = (pointPlacement === "middle") ? 10 : 5;

        roughCanvas.polygon(
     polygon, styling);
 });
 
                
  });
   
  }
setCanvas();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.