Creating a canvas image in Javascript

Question

It seems I got into an error message that is hard for me to debug. What I'm trying to do is dynamically create an image like this one ( http://www.webreference.com/programming/javascript/mk/column3/creating/cp_mini_gradient_details.png ) with a canvas.

The error message I get is:

[Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)"] 

I have googled and it seems there are several reasons for this error message, but I cannot find any binding to the canvas.

Here is my code:

 var newCanvas = document.createElement('canvas'); newCanvas.height="30"; newCanvas.width="113"; document.body.appendChild(newCanvas); var context = newCanvas.getContext('2d'); context.fillStyle = '#FFFFFF'; context.fillRect(0, 0, 113, 15); context.fillStyle = '#000000'; context.fillRect(0, 15, 113, 30); var numCanH = Number(newCanvas.height); var numCanW = Number(newCanvas.width); var imgd; if (context.createImageData) { console.log('context.createImageData'); imgd = context.createImageData(numCanW, numCanH); } else if (context.getImageData) { console.log('context.getImageData'); imgd = context.getImageData(0, 0, numCanW, numCanH); } else { console.log('else'); imgd = {'width' : numCanW, 'height' : numCanH, 'data' : new Array(numCanW*numCanH*4)}; } var pix = imgd.data; var ndv = numCanW/6; for (var i = 0; i <= numCanH; i++) { var a=1-Math.abs(2*i-numCanH)/numCanH; for (var j = 0; j < numCanW; j+=4) { var bitUp = Math.ceil((255/130)*j); var bitDown = 255-bitUp; if(j<(ndv)){ //Red to Yellow - (rgb) 255,0,0 to 255,255,0 pix[j] = 255; // red channel pix[j+1] = bitUp; // green channel pix[j+2] = 0; // blue channel } else if(j>(ndv) && j<(ndv)*2){ //Yellow to Green - (rgb) 255,255,0 to 0,255,0 pix[j] = 255; // red channel pix[j+1] = bitDown; // green channel pix[j+2] = 0; // blue channel } else if(j>(ndv)*2 && j<(ndv)*3){ //Green to Cyan - (rgb) 0,255,0 to 0,255,255 pix[j] = 0; // red channel pix[j+1] = 255; // green channel pix[j+2] = bitUp; // blue channel } else if(j>(ndv)*3 && j<(ndv)*4){ //Cyan to Blue - (rgb) 0,255,255 to 0,0,255 pix[j] = 0; // red channel pix[j+1] = bitDown; // green channel pix[j+2] = 255; // blue channel } else if(j>(ndv)*4 && j<(ndv)*5){ //Blue to Magenta - (rgb) 0,0,255 to 255,0,255 pix[j] = bitUp; // red channel pix[j+1] = 0; // green channel pix[j+2] = 255; // blue channel } else if(j>(ndv)*5 && j<(ndv)*6){ //Magenta to Red - (rgb) 255,0,255 to 255,0,0 pix[j] = 255; // red channel pix[j+1] = 0; // green channel pix[j+2] = bitDown; // blue channel } pix[j+3] = a; // alpha channel+ console.log('bitUp '+bitUp); console.log(typeof bitUp); console.log('bitDown '+bitDown); console.log(typeof bitDown); console.log('a '+j); console.log(typeof a); console.log('j '+j); console.log(typeof j); console.log('i '+i); console.log(typeof i); console.log(imgd); console.log('before context.putImageData'); context.putImageData(imgd, j,i); console.log('after context.putImageData'); } } 

It is strange that an error occurs only during the second iteration of the loop.

Answer 1

Your call to putImageData is trying to draw the entire imgd that you created to be the width and height of the canvas into the canvas with the top left corner at (j, i). This fails after the first iteration of the scrap, because the bottom / right of imgd is removed below / to the right of the canvas.

Take a call to putImageData outside the outer loop and make it always draw (0,0). Also, when designing the index of the pixel array that you set, be sure to add * numCanW * 4; and note that your inner loop should go from 0 to iCanW * 4, not from 0 to iCanW, since you are interacting with color components, not pixels.