Creating an image with canvas in Javascript

Question

I seem to have hit an error message that I'm having a hard time debugging. What I'm trying to do is dynamically create an image such as this one ( http://www.webreference.com/programming/javascript/mk/column3/creating/cp_mini_gradient_details.png ) with canvas.

The error message I'm getting is:

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

I've googled and there seems to be a number of causes for this error message, but I can't seem to find any relating to canvas specifically.

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');      
    }
}

The weird thing is, the error only occurs during the second iteration of the loop.

I recently found out how to copy a 2D array of RBG values to the canvas - this may be useful in some cases. http://stackoverflow.com/a/13826397/975097 — Anderson Green, Dec 14 '12 at 06:53

score 3 · Accepted Answer · answered Feb 25 '09 at 17:09

Your putImageData call is trying to draw the entirety of imgd, which you created to be the canvas's width and height, into the canvas with top left corner at (j,i). This fails after the first iteration of the lop because the bottom / right of imgd go off the bottom / right of the canvas.

Take the putImageData call outside the outer loop and make it always draw at (0,0). Also, when working out the array index of the pixel you are setting, don't forget to add in i*numCanW*4; and note that your inner loop needs to go from 0 to iCanW*4 not 0 to iCanW as you are interating over colour components, not pixels.

Creating an image with canvas in Javascript

1 Answers1