Canvas Behaves Oddly At Different Sizes

Been playing around with canvas lately, but it behaves oddly at different sizes. Here's my code: HTML: CSS: canvas { width:300px; height:50px; } JS: v

Solution 1:

Don't use CSS to change the size of the canvas. Instead change the size of the element:

c.width=300;c.height=50;

That's because when you resize with CSS you're "stretching" the pixels. When you change the size of the element itself, you are actually adding/subtracting pixels.