如何在javascript中确定HTML5画布的大小和位置

Question

i am using javascript to dynamically create a canvas and display it on a webpage but the size of the canvas and the position of the canvas both vary based on the size of the device that is viewing the webpage whether it be mobile, or desktop. I would do this in css, however the css does not work fullyfor html5 canvases as far as i know. I would use this:

#myCanvas{
  height: 50%;
  width: 50%;
  position: relative;
  top: 10%;
  left: 10%;
}

however the height and width values for the canvas only take pixel values and the only solution i could think for that is to get the size of the parent element and then get a portion of that to depict what size i wanted the canvas to be. however if that doesnt work i dont know. As far as the positioning goes i have no idea what i am supposed to do. And like i said i am creating the canvas dynamically so the code looks like this:

var c = document.createElement("canvas");
c.height = (whatever value);
c.width = (whatever value);
c.style.position = "relative";
c.style.top = (whatever value);
c.style.left = (whatever value);
var ctx = c.getContext('2d');
parentElement.appendChild('c');

if anyone can give me a solution to my problem it would be very helpful thank you =)

Answer 1

Enclose the canvas in a container div, set the dimension of this div to be proportional instead of fixed. Then, use the JQuery "resize" function to set the dimension of the canvas to be the width and height of the container div.

$(window).resize(function() {
   $('#canvas').attr('width', $('#parent').width());
   $('#canvas').attr('height', $('#parent').height());
});

Read this article for more info: http://ameijer.nl/2011/08/resizable-html5-canvas/