javascript - cambiar - ¿Cómo obtengo el ancho y alto de un lienzo HTML5?

cambiar tamaño canvas javascript

Question

¿Cómo puedo obtener el ancho y alto del elemento canvas en JavaScript?

Además, ¿cuál es el "contexto" del lienzo que sigo leyendo?

Answer 1

Ahora, a partir de 2015, todos los navegadores (¿importantes?) parecen tener c.width y c.height para obtener el tamaño interno del lienzo, pero:

la pregunta ya que las respuestas son engañosas, porque el lienzo tiene en principio 2 tamaños diferentes / independientes.

El "html" permite decir CSS ancho / alto y su propio (atributo-) ancho / alto

mira este pequeño ejemplo de diferente tamaño , donde puse un lienzo 200/200 en un elemento de 300/100 html

Con la mayoría de los ejemplos (todos los que vi), no hay un conjunto de tamaños css, por lo que se consiguen implícitamente el ancho y la altura del tamaño del lienzo (de dibujo). Pero eso no es obligatorio, y puede producir resultados divertidos, si toma el tamaño incorrecto, es decir. css ancho / alto para posicionamiento interno.

Answer 2

Bueno, todas las respuestas anteriores no son del todo correctas. 2 de los principales navegadores no admiten esas 2 propiedades (IE es una de ellas) o las usan de manera diferente.

Mejor solución (compatible con la mayoría de los navegadores, pero no revisé Safari):

var canvas = document.getElementById(''mycanvas'');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;

Al menos obtengo los valores correctos con scrollWidth y -Height y DEBO establecer canvas.width y height cuando se cambia el tamaño.

Answer 3

El objeto de contexto le permite manipular el lienzo; puede dibujar rectángulos, por ejemplo, y mucho más.

Si desea obtener el ancho y alto, puede usar el width y height estándar de los atributos HTML:

var canvas = document.getElementById( ''yourCanvasID'' );
var ctx = canvas.getContext( ''2d'' );

alert( canvas.width );
alert( canvas.height ); 

Answer 4

Las respuestas que mencionan canvas.width devuelven las dimensiones internas del lienzo, es decir, las especificadas al crear el elemento:

<canvas width="500" height="200">

Si dimensiona el lienzo con CSS, sus dimensiones DOM son accesibles a través de .scrollWidth y .scrollHeight :

var canvasElem = document.querySelector(''canvas'');
document.querySelector(''#dom-dims'').innerHTML = ''Canvas DOM element width x height: '' +
      canvasElem.scrollWidth +
      '' x '' +
      canvasElem.scrollHeight

var canvasContext = canvasElem.getContext(''2d'');
document.querySelector(''#internal-dims'').innerHTML = ''Canvas internal width x height: '' +
      canvasContext.canvas.width +
      '' x '' +
      canvasContext.canvas.height;

canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);

<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">

Answer 5

Puede valer la pena mirar un tutorial: Firefox Canvas Tutorial

Puede obtener el ancho y alto de un elemento canvas simplemente accediendo a esas propiedades del elemento. Por ejemplo:

var canvas = document.getElementById(''mycanvas'');
var width = canvas.width;
var height = canvas.height;

El contexto es un objeto que obtienes del lienzo para permitirte dibujar en él.

Answer 6

Tuve un problema porque mi lienzo estaba dentro de un contenedor sin identificación, así que usé este código jquery a continuación

$(''.cropArea canvas'').width()