このコードは画像全体を黒くしてはいけませんか？

Question

p5.jsでは、私は個人的なプロジェクトのためにイメージの各ピクセルを処理しようとしていますので、私はゆっくりと始まり、各ピクセルを黒くしてみようと考えました。何らかの理由で画面が白くなってしまい、ピクセルが更新されない理由がわかりません。ここでは、コードです：

var Canvas; 
var srcImg; 
var defaultImg = "http://i.imgur.com/ARg0OOy.jpg"; 

function preload() { 
srcImg = loadImage(defaultImg); 
} 

function setup() { 
    createCanvas(srcImg.width,srcImg.height); 
    noLoop(); 
} 

function draw() { 
    srcImg.loadPixels(); 
    for (var x = 0; x < srcImg.width; x++) { 
    for (var y = 0; y < srcImg.height; y++) { 
     var loc = x + y*srcImg.width; 
     srcImg.pixels[loc] = color(224,29,29); 
    } 
    } 
    console.log(loc); 
    console.log(srcImg.width); 
    console.log(srcImg.height); 
    console.log(srcImg.width * srcImg.height); 
    srcImg.updatePixels(); 
    //image(srcImg, 0,0,srcImg.width, srcImg.height); 
} 

をまた、私は最後の行のコメントを解除した場合、私は、元の画像を見ると、それは上部で切断され（それは黒のすべてのピクセルになっていません）。あなたは自分のために見ることができますhere.これはなぜ起こっている？

編集：1行のピクセルでも鮮やかな赤色になりました。なぜ白い画面が表示されるのかは、ピクセルをどの色に設定しても白くなるためです。また、私はこの赤い色全体の行を作ろうとしたとき、図のように約1/4で停止し、here（まだ白です）。なぜこれが起こっているのか分かりません。

Answer 1

すべてのピクセルを黒にしていますが、黒ピクセルの上にsrcImageを描画しています。だからあなたが見るのはsrcImageです。

黒いピクセルを表示するには、image(srcImg, 0,0,srcImg.width, srcImg.height);行をコメントアウトしてみてください。