JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="255" height="255" >Oh, sorry I don't get Canvas yet</canvas>

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');


  var radgrad3 = ctx.createLinearGradient(255,10,0,180,80,190);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(1, 'red');

  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,255,255);
  

  
  var ctx4 = document.getElementById('canvas').getContext('2d');
  var radgrad4 = ctx4.createLinearGradient(0, 0, 0, 255);
  radgrad4.addColorStop(0, '#000000');
  radgrad4.addColorStop(1, '#ff0000');
  
  ctx4.fillStyle = radgrad4;
  ctx4.fillRect(0,0,25,25);