Question

I can’t seem to figure out how to scale pixels on an html5 canvas. Here’s where I am so far.

function draw_rect(data, n, sizex, sizey, color, pitch) {
    var c = Color2RGB(color);
    for( var y = 0; y < sizey; y++) {
        var nn = n * 4 * sizex;

        for( var x = 0; x < sizex; x++) {
            data[nn++] = c[0];
            data[nn++] = c[1];
            data[nn++] = c[2];
            data[nn++] = 0xff;
        }
        n = n + pitch;;
    } 
}

function buffer_blit(buffer, width, height) {
    var c_canvas = document.getElementById("canvas1");
    var context = c_canvas.getContext("2d");
    context.scale(2, 2);
    var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
    var n = width * height - 1;
    while((n--)>=0) draw_rect(imageData.data, n, pixel, pixel, buffer[n], width);

    context.putImageData(imageData, 0, 0);  
}

Edits:
I updated the code here. Not sure what changed.

Maybe some images will help.
First image has pixel size of one, second pixel size of 2. Note that the image doubles and only fills half the canvas.

Edit2:
I made a webpage showing at least one of the strange behaviors I’m experiencing.

Live example

Answer 1

drawImage can be used to scale any image or image-like thing ( or for instance) without using ImageData — unless you explicitly want to handle pixel specific scaling you should probably use native support. eg.

var myContext = myCanvas.getContext("2d");
// scale image up
myContext.drawImage(myImage, 0, 0, myImage.naturalWidth * 2, myImage.naturalHeight * 2);
// scale canvas up, can even take the source canvas
myContext.drawImage(myCanvas, 0, 0, myCanvas.width * 2, myCanvas.height * 2);
// scale up a video
myContext.drawImage(myVideo, 0, 0, myVideo.width * 2, myVideo.height * 2);

alternatively you could just do:

myContext.scale(2, 2); // say
//.... draw stuff ...
myContext.scale(.5, .5);

Depending on your exact goal.