JSFiddle - React, Tailwind, and code Playground

by dalvarezmartinez1

CSS

canvas {
  /* border: 1px solid red; */
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  createArrow('black', 20, 1);
});

function createArrow (color, canvasWidth, canvasHeight) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  context.strokeStyle = color;
  context.fillStyle = color;
  // Draw the line as thick as the whole canvas height
  context.lineWidth = canvasHeight;

  context.beginPath();
  context.moveTo(0, canvasHeight/2);
  context.lineTo(canvasWidth, canvasHeight/2);
  context.stroke();
  
  // return context.createPattern(canvas, 'no-repeat');
  
  document.body.appendChild(canvas);
}