0

I am currently working with Chart.js to generate bar graphs in a project. I've set it up to return data to the chart through an ASP.NET webmethod, and I've set it up to use static labels.

I've done this by iterating through the datasets and data after the onComplete callback, then using the fillText command to write onto the canvas.

Now, I'm having the issue where labels sometimes overlap or overlap with the contents of the chart.

What I want to do is check if the canvas already has something on it at a given point / region. Is this possible? If so, how can it be done?

I'm an experienced programmer but am very new to JavaScript. I searched for a few hours trying to find a suitable solution but could not find anything that worked correctly.

I can provide sample code and images if needed, but I do not think it is required given the scope of the question.

Current project resources: JavaScript, JQuery, Chart.js, bootstrap, ASP.NET webmethods

Thank you

Jack
  • 1,453
  • 1
  • 15
  • 35
  • 1
    The canvas contains pixels, all you can ask from it is what colours are the pixels and how many are there. All other abstracts must come from another source. The 2D API adds a little but that data is transient and not intended to hold any abstractions apart from those involved with rendering. You will have to look at the higher level interfaces you are using to render to the canvas (eg chart.js) to get information about objects rendered to the canvas. – Blindman67 Jun 06 '17 at 15:24
  • You can get the pixel data of a canvas as an array from the graphics context, by calling getImageData() on the graphics context. Perhaps you can use that find out what is in a particular point or region? – BlinkingCahill Jun 06 '17 at 15:27
  • This might help: https://stackoverflow.com/questions/667045/getpixel-from-html-canvas – Tot Zam Jun 06 '17 at 21:09
  • It is enough for me to be able to tell the color of the pixel and determine if anything is preset. The information provided is helpful. I will post a solution here once I finish it. Thank you! – Jack Jun 07 '17 at 12:08

1 Answers1

1

Well, my requirements changed and I no longer need to worry about this, but I will post the code I used anyways:

var imgData = context.getImageData(0,0,canvas.width,canvas.height);

// Function to find the hex color of a specific pixel in the imgData context.
function getPixel(imgData, index) {
    var i = index * 4, d = imgData.data;
    return rgbToHex(d[i], d[i + 1], d[i + 2]) 
    // returns hex string of rgb values.
}

// Function to caluclate offset of imgData context and then return hex color from getPixel function call.
function getPixelFromCoordinate(imgData, x, y) {
    return getPixel(imgData, y * imgData.width + x);
}

// Function to convert a given rgb value to a hex string.

function rgbToHex(r, g, b) {
    // Left shift values to allow for cheap hex construction
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

This code worked fine, so hopefully it will be helpful to others.

Reference 1: getPixel from HTML Canvas?

Reference 2: How to use JavaScript or jQuery to read a pixel of an image when user clicks it?

Jack
  • 1,453
  • 1
  • 15
  • 35