javascript html5 scaling pixels

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

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.

You could temporarly use an image with canvas.toDataURL(), then draw it resized with drawImage().

context.putImageData() should do the trick, but the dimensions parameters are not yet implemented in Firefox.

The code, with two canvas for demo purposes:

var canv1 = document.getElementById("canv1"),
    canv2 = document.getElementById("canv2"),
    ctx1  = canv1.getContext("2d"),
    ctx2  = canv2.getContext("2d"),
    tmpImg = new Image();

/* Draw the shape */
ctx1.beginPath();
ctx1.arc(75,75,50,0,Math.PI*2,true);
ctx1.moveTo(110,75);
ctx1.arc(75,75,35,0,Math.PI,false);
ctx1.moveTo(65,65);
ctx1.arc(60,65,5,0,Math.PI*2,true);
ctx1.moveTo(95,65);
ctx1.arc(90,65,5,0,Math.PI*2,true);
ctx1.stroke();

/* On image load */
tmpImg.onload = function(){
  /* Draw the image on the second canvas */
  ctx2.drawImage(tmpImg,0,0, 300, 300);
};
/* Set src attribute */
tmpImg.src = canv1.toDataURL("image/png");

EDIT: olliej is right, there is no need to use a temp image