Sample image pixel colours

Asked Jun 08 '16 at 19:58

Active Jun 08 '16 at 20:04

Viewed 26 times

I'm currently trying to get a random pixel colour from an image using HTML5 Canvas.

var sampleCanvas = document.createElement('canvas');
    sampleCanvas.width = 50;
    sampleCanvas.height = 50;
    sampleContext = sampleCanvas.getContext('2d');

var sampleImage = new Image();
    sampleImage.onload = function() {
        sampleContext.drawImage(sampleImage, 0, 0);
    }
    sampleImage.src = 'canvas_sample.png';

var calculatedFill = sampleContext.getImageData(Math.random() * sampleCanvas.width, Math.random() * sampleCanvas.height, 1, 1).data;

However, calculatedFill is always [0, 0, 0, 0], never anything else (even though there isn't a single black pixel on the image)

edited Jun 08 '16 at 19:59

j08691

204,283
31
260
272

asked Jun 08 '16 at 19:58

user2036108

1,227
1
10
12

Maybe you have to round your numbers? Isn't `Math.random()` a decimal? – jeffjenx Jun 08 '16 at 20:00
1

^ and `onload` is an asynchronous operation. Make sure you're only grabbing image data *after* the image is loaded and has been drawn. – Mike Cluck Jun 08 '16 at 20:03
Thanks Mike C, that was the issue. – user2036108 Jun 08 '16 at 20:06

Sample image pixel colours

0 Answers0