how to get pixel color from image using x and y coordinates?

Question

What i am tryting to do is take the "pixel.jpg" and cosole.log the RGB value of a pixel at the x and y values determined by a variable. im i assuming i would need to to create a canvas and then scan the entire thing using a for loop.. ??

<meta charset="UTF-8">
title>Pixel</title>
<link href="pixel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="pixel.js"></script>

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

Answer 1

Draw the pixel on a canvas. Then use getImageData.

var getPixelColor = function(img,x,y){
    var canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = 1;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img,x,y,1,1,0,0,1,1);
    return ctx.getImageData(0,0,1,1);
}