Estoy teniendo mucha confusión tratando de averiguar qué está pasando. Estoy dibujando algunos cuadros usando javaScript. Estoy siguiendo esta guía para recrear la ruptura.
El problema que tengo es que el tamaño del lienzo no funciona si estoy usando css externo para establecer la altura del ancho como se muestra a continuación, el css no funciona.
#myCanvas{ width: "480"; height: "320"; }Sin embargo, si cambio el código en mi html a este
<canvas id = "myCanvas" width ="480" height="320"> </canvas>La caja es del tamaño correcto. ¿Por qué no puedo establecer la altura y el ancho fuera del html?
Aquí hay un JSfiddle de la caja con el tamaño correcto.
Si mueve el ancho/alto de css hacia el lado externo, ya no funciona. ¿Lo que da?
Hay una diferencia entre las etiquetas en línea (id, clase, ancho, alto, estilo, ...) y los atributos css (ancho, alto, tamaño de fuente, ...).
Si desea utilizar los atributos css ancho y alto, debe eliminar el "" y agregar la unidad.
p.ej
#myCanvas{ width: 480px; height: 320px; }También puede agregar css en línea usando el atributo de estilo:
<canvas id = "myCanvas" style = "width: 480px; height: 320px">Un lienzo tiene 2 tamaños, la dimensión de los píxeles en el lienzo (es backingstore o drawingBuffer) y el tamaño de visualización.
El número de píxeles se establece utilizando los atributos del lienzo en HTML.
<canvas id = "myCanvas" style = "width: 480px; height: 320px">que está separado del ancho y el alto que están en el estilo CSS del lienzo.
myCanvas{ width: 480px; height: 320px;Cambió su código para entender mejor.
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(10, 10, 30, 20); ctx.fillStyle = "#FF0000"; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(30, 80, 20, 0, Math.PI*2, false); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.rect(10, 140, 30, 40); ctx.strokeStyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closePath(); canvas { background:#eee; border:1px solid #ccc; width:200px; height:300px } <canvas id="myCanvas" width="100" height="200"></canvas>