How to properly set size of the Canvas element
A problem that comes up frequently at Q&A sites and in forums is how to properly set size of the canvas element. The problems are typical: things doesn’t draw where they are suppose to show up, or doesn’t show at all or they gets stretched or everything looks blurry. For someone new to canvas this is an understandable frustration: the logic dictates, especially if you have only worked with HTML/CSS, that in order to set a size of an element (for example a DIV) you need to use CSS: #myDiv { width: 200px; height: 100%; } Then this should also be the case for other elements including canvas, right? You can do this with Canvas too however, canvas is not your everyday element. It’s more comparable to an image element than a regular element, but a “live” image (as we can change its content and size). The canvas consists roughly put of two layers that is the element itself that we use in HTML – the CANVAS – and there is the (source) bitmap whic...
