HTML5 canvas text resizes - html

Question

This must be obvious to most of you, so sorry for asking, but how come when I change the width of my canvas my text resizes as well? And how can I prevent this from happening?
code used:
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.fillText("text",10,10);
btw: before I get voted down / bashed at, I tried searching about this for like twenty minutes.. no results.

Answer 1

If you aren't re-sizing it using CSS You need to set the context font like so.
Live Demo
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function drawText() {
ctx.font = 'italic 20px Calibri';
ctx.fillText("HELLO!", 100, 100);
}
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawText()
});
drawText()​
If you are resizing the canvas element using css like the following example
canvas{
width:200px;
}
Then theres not much you can do to fix it. When you resize the canvas using CSS you just stretch it, but the pixel density stays the same. You should never use css to resize the canvas element, rather you should be using the width and height properties via JS like I do in my example above.

Answer 2

This problem might occur due to changing the attributes by using CSS. It seems that canvas gets re-scaled when you access its properties through css. I think your problem might be solved if you use this in your javascript code instead of changing it through css :
document.getElementById("yourCanvasId").height = 150; // height you want to change to
document.getElementById("yourCanvasId").width = 150; // width you want to change to
Same problem occurred with me. I did this and the problem was solved. Hope it helps !