JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas_partitionLayer" class="canvas-def" width="300" height="300"></canvas>

CSS

body {
    margin: 0px;
    padding: 0px;
}
.canvas-def {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

var canvas_partitionLayer;
var context_partitionLayer;
var width = 300;
var height = 300;

//window.onload = function () {

    canvas_partitionLayer = document.getElementById('canvas_partitionLayer');
    context_partitionLayer = canvas_partitionLayer.getContext('2d');

    var imageObj = new Image();
    imageObj.crossOrigin = "Anonymous"; //cors support
    imageObj.onload = function () {
        context_partitionLayer.drawImage(imageObj, -50, -50, width, height);
        applyPaint();
    };
    imageObj.src = "http://i.imgur.com/8VsK7gS.png";

    
//};

function applyPaint()
{
	var imageData = context_partitionLayer.getImageData(0, 0, 10, 10);
	var i, red, green, blue, alpha;

	for(i = 0; i < 100; i += 4) {
	  red = imageData.data[i];
	  green = imageData.data[i + 1];
	  blue = imageData.data[i + 2];
	  alpha = imageData.data[i + 3];
	  console.log(red + "," + green + "," + blue + "," + alpha);
	}
}