Two handy helper routines for canvas work

canvas-helper-tools.js

  // Get the canvas and the context 
  var c = document.querySelector('canvas');
  var cx = c.getContext('2d');

  // pixelcolour returns an object of rgba for the pixel at x and y 
  // great for checking if you are in a certain boundary or for 
  // colourpickers
  function pixelcolour(x, y) {
    var pixels = cx.getImageData(0, 0, c.width, c.height);
    var index = ((y * (pixels.width * 4)) + (x * 4));
    return {
      r:pixels.data[index], 
      g:pixels.data[index + 1], 
      b:pixels.data[index + 2], 
      a:pixels.data[index + 3]
    };
  };
  
  // getpixelamount returns the amount of pixels of a 
  // certain rgb colour. Handy to test how much has 
  // been changed or see how many could be replaced
  function getpixelamount(r, g, b) {
    var pixels = cx.getImageData(0, 0, c.width, c.height);
    var all = pixels.data.length;
    var amount = 0;
    for (i = 0; i < all; i += 4) {
      if (pixels.data[i] === r && 
          pixels.data[i+1] === g && 
          pixels.data[i+2] === b) {
        amount++;
      }
    }
    return amount;
  }
  
  
  
  
  

@marcusklaas Some of us like saving minutes.