JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<img src="/img/logo.png">

<pre id="output"></pre>

<div id="Q">

</div>

CSS

body {background: lightblue;padding: 20px;}
pre {color: black}
img {position: relative; animation: mymove 1s infinite;}

@keyframes mymove {
    from {background: pink;}
    to{background: lime;}
}

JavaScript

$(function() {
    
    $('img').mousemove(function(e) {
        
        /* if(!this.canvas) {
            this.canvas = $('<canvas />')[0];
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            
        }
        this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height); */
      html2canvas(this).then(canvas => {
      
      	$('#Q').html(canvas);
        var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
        
        $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);
      });
        /* var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
        
        $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]); */
        
        
    });
    
    
    
});