JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="400" height="500"></canvas>

CSS

#myCanvas {}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var red = 0;
var blue = 0;
var green = 0;

var mousePos;

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function drawPaint(mousePos) {
  red++;
  if (red >= 255) {
    red = 254
    green++;
  }
  if (green >= 255) {
    green = 254;
    blue++;
  }
  if (blue >= 255) {
    red = 0;
    green = 0;
    blue = 0
  }

  context.beginPath();
  context.arc(mousePos.x, mousePos.y, 25, 0, 2 * Math.PI, false);
  context.fillStyle = "rgba("+red+","+green+","+blue+",1)"
  context.fill();
}

canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  drawPaint(mousePos);
}, false);