Why <canvas> draws blurry images? Did it happen to you as well? I found fairly simple tutorial, and tried to code according to its advice. The result is shown below. Big blurry cat … Then I tried to copy paste the code, but with almost identical result. Again I got a blurry image. Next day I found out that I have to specify attributes width and height directly on the canvas element. It is not enough to set it via css. It doesnt not make any sence to me, because it is good practise to separate html markup and stylesheets. But for some reason it is not good practise for canvas 🙂
Then I encountered similar problem when drawing gradients. When I set width and height via css, then the gradient was always too big to fit into the canvas, only small part of it was visible. My advice is to always specify width/height via attributes on canvas.
