However, my problem is that mouse drag does not always work. The code that is supposed to take care of this is shown below.

          on: {
            mouseover: function(event) {
              if (event.buttons === 1) {
                event.target.style.background =
                  "rgba(" +
                  colour[0] +
                  ", " +
                  colour[1] +
                  ", " +
                  colour[2] +
                  ", 1)";
The issue I am having is that sometimes when I hold the mouse click down the circle sometimes changes but sometimes I get the circle “not-allowed” icon. How can i make sure it works all the time?
              
WOW!!!

I finally fixed it. The answer was here https://javascript.info/mouse-drag-and-drop
In a nutshell here is why =>

That’s because the browser has its own Drag’n’Drop for images and some other elements that runs automatically and conflicts with ours
The correct question i finally asked was Javascript “mousemove” event sometimes doesn't fire which led me to => (https://stackoverflow.com/qustions/53298914/javascript-mousemove-event-sometimes-doesnt-fire) .