JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.3/jcanvas.js"></script>
<canvas id="can"></canvas>
<div id="rgbwert">

</div>

CSS

#rgbwert{
  font-size:25px;
  color:yellow;
}

JavaScript

var im = new Image();
        im.onload = function () {
        $("#can").drawImage({
          layer: true,
           crossOrigin: 'anonymous',
         source: im.src,
         width: 1, height: 1,
       fromCenter: false,
                load: function () {
                  $("#can").setPixels({
                        x: 0, y: 0,
                        width: 1, height: 1,
                        fromCenter: false,
                        each: function (px) {
                           r= px.r;
                           g= px.g;
                           b= px.b;
                        }
                    });
 $('#rgbwert').html("rgb(" + r + "," + g + "," + b +")") 
$('body').css("background","rgb(" + r + "," + g + "," + b +")")                   
                    console.log(r, g, b);
                }
            });
        }
        im.src = "https://www.gravatar.com/avatar/90edc3b12944d0017b29a998fd6a4766/?default=&s=64";