Hey,

My canvas is resizing everything I draw on it based on its size, including images. Is there anyway I can draw using pixel values, without the canvas resizing it?

Here is my drawing function:


function drawOnCanvas() {
var b_canvas = document.getElementById("bubbles");
var context = b_canvas.getContext("2d");
context.setTransform(1, 0, 0, 1, 0, 0);

for (var x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 375);
}
for (var y = 0.5; y < 375; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
}

context.strokeStyle = "#eee";
context.stroke();
}

And this is how it looks like:

http://www.cephea.de/pub/canvas.png

No errors.

----- Edit ----
I have found the solution here: http://stackoverflow.com/questions/1664785/html5-canvas-resize-to-fit-window. The fix was to set the canvas width and height before drawing:

context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;