hacer lienzo tan ancho y tan alto como el padre

Me gustaría hacer un lienzo rectangular para simular una barra de progreso, pero parece que cuando configuro el ancho y el alto de un lienzo al 100%, realmente no lo hace tan alto y ancho como el padre

consulte el ejemplo a continuación
http://jsfiddle.net/PQS3A/

¿Es posible incluso hacer lienzos no cuadrados? No quiero codificar la altura y el ancho del lienzo, porque debería cambiar dinámicamente cuando se ve en una pantalla más grande o más pequeña, incluidos los dispositivos móviles.

Aquí hay un ejemplo funcional que soluciona los problemas:

http://jsfiddle.net/PQS3A/7/

Tuviste varios problemas con tu ejemplo:

1. A <div>no tiene heighto widthatributos. Debe configurarlos a través de CSS.
2. Incluso si el div tuviera el tamaño correcto, estaba usando el valor predeterminado position:static, lo que significa que NO es el padre de posicionamiento de ningún hijo. Si desea que el lienzo tenga el mismo tamaño que el div, debe establecer el div en position:relative(o absoluteo fixed).
3. Los atributos widthy heighten un lienzo especifican el número de píxeles de datos que se dibujarán (como los píxeles reales de una imagen) y están separados del tamaño de visualización del lienzo. Estos atributos deben establecerse en números enteros.

El ejemplo vinculado anteriormente usa CSS para establecer el tamaño de div y convertirlo en un padre posicionado. Crea una función JS (que se muestra a continuación) para configurar un lienzo para que tenga el mismo tamaño de visualización que su padre posicionado, y luego ajusta las propiedades internas widthy heightpara que tenga la misma cantidad de píxeles que muestra.

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

Use los atributos widthy heightdel lienzo si desea que sea tan grande como el elemento principal. Puede configurarlos usando JQuery .

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

Si no conoce JQuery , utilice el siguiente Javascript:

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

Si usa los cssatributos de alto y ancho style="width:100%; height:100%;", entonces solo está estirando el lienzo. Esto hará que todo lo que dibuje en el lienzo se vea estirado.

JSFiddle para la solución JQuery.

JSFiddle para la solución Javascript.

Utilice propiedades CSS en lugar de atributos en las etiquetas:

<div style="background-color:blue;width:140px;height:20px">
    <canvas style="background-color: red;width:100%;height:100%">
    </canvas>
</div>​

Eso parece funcionar