Canvas: problemas con el resultado

[Tecna]

Buenas,

1.- Estás pintando el rectángulo antes de definir el color, por eso el primero se pinta en negro que es el color por defecto, el segundo se pinta del primer color que defines y el segundo color que defines no se usa para nada porque no dibujas nada después de cambiarlo. Tienes que definir todas las propiedades que quieras aplicar antes de dibujar en el canvas.

2.- El objeto canvas tiene asignado unos valores por defecto para las coordenadas de referencia que son 300 de ancho y 150 de alto (sin unidad) y el navegador lo renderiza en pixeles si no se define otro valor.

3.- Si cambias el tamaño del elemento mediante CSS no estás cambiando esas propiedades del objeto, sólo su apariencia, hay que cambiar también los valores de referencia de las coordenadas mediante las propiedades del objeto con javascript. Para que las transformaciones sean más sencillas lo más fácil es ajustarlo al tamaño de la ventana, no hay que olvidar que los píxeles no siempre son cuadrados.

No se si es lo que buscas pero el segundo rectángulo está montado sobre el primero, debería empezar en 110 o el primero tener 90 de ancho a no ser que quieras jugar con superposiciones y transparencias.