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

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

Podría ser digno de mirar un tutorial: Firefox Canvas Tutorial

Puede obtener la anchura y la altura de un elemento canvas simplemente accediendo a las 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 poder dibujar en él.

Answer 2

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 la altura, sólo puede utilizar los atributos de HTML estándar width y height:

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

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

Answer 3

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

mejor solución (apoyada por la mayoría de los navegadores, pero no el registro Safari):

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

lo menos, llegar valores correctos con scrollWidth y -Altura y debe establecer canvas.width y la altura cuando está redimensionado

Answer 4

ahora a partir del año 2015 todos (grandes?) Navegadores parecen alow c.width y c.height para obtener el lienzo tamaño interno, sino:

la pregunta como las respuestas se missleading, debido a que el lienzo tiene, en principio, 2 tamaños diferentes/independientes.

El "HTML" digamos ancho CSS/altura y su propia (atributo,) de anchura/altura

vistazo a este short example of different sizing, donde pongo unas 200/200 lienzo en un elemento html-

300/100

Con la mayoría de los ejemplos (todos los que vi) no hay un conjunto de tamaños css, por lo que se consigue el ancho y alto del tamaño (de dibujo) del lienzo. 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 5

Las respuestas citan canvas.width retorno las dimensiones internas de la tela, es decir,los que se especifican al crear el elemento:

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

Si ajusta el tamaño del lienzo con CSS, sus dimensiones DOM acceso por .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 6

tuve un problema porque mi lienzo estaba dentro de un contenedor sin ID, así que usé este código jquery debajo de

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