My HTML File
My CSS FIle
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
canvaswidth = c.width;
But Even After Changing Width Of Browser I Am Getting Canvas Width As 300. What Is The Issue.
The actual dimensions of the HTMLCanvasElement are defined by its "width" and "height" properties, which are different from the CSS style-declaration ! Setting the CSS attributes different to those of the canvas' width and height will result in scaling the canvas by the browser, as if you were zooming content.
To match your expectancy what you'd want is to explicitly set the width and height of the canvas to match the percentages you'd expect from the CSS declartions, i.e. : measure the dimensions in pixels of the canvas' parent container (let's assume 320px width in this example), multiply it by the percentage of choice (let's say 90% which is 320 * .9 == 288 pixels) and set it onto the canvas' width property, do the same for the height et voila.
Note: this has implications for your draw-methods, depending on how you're drawing the content onto the canvas (i.e. when using absolute values for coordinates and dimensions) it might actually be more feasible to just have it scaled by CSS !