Como obtenho a largura e a altura de uma tela HTML5?

Como posso obter a largura e a altura do elemento canvas em JavaScript?

Além disso, qual é o "contexto" da tela sobre a qual continuo lendo?

Pode valer a pena dar uma olhada em um tutorial: Firefox Canvas Tutorial

Você pode obter a largura e a altura de um elemento de tela simplesmente acessando essas propriedades do elemento. Por exemplo:

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

Se os atributos de largura e altura não estiverem presentes no elemento de tela, o tamanho padrão de 300 x 150 será retornado. Para obter dinamicamente a largura e altura corretas, use o seguinte código:

const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

Ou usando a sintaxe de desestruturação de objeto mais curta:

const { width, height } = canvas.getBoundingClientRect();

O contexté um objeto que você obtém da tela para permitir que você desenhe nele. Você pode pensar no contextcomo a API para a tela, que fornece os comandos que permitem desenhar no elemento da tela.

Bem, todas as respostas anteriores não estão totalmente corretas. 2 dos principais navegadores não suportam essas 2 propriedades (o IE é uma delas) ou as usam de maneira diferente.

Melhor solução (compatível com a maioria dos navegadores, mas não verifiquei o Safari):

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

Pelo menos obtenho os valores corretos com scrollWidth e -Height e PRECISO definir canvas.width e height quando ele é redimensionado.

As respostas que mencionam canvas.widthretornam as dimensões internas do canvas, ou seja, aquelas especificadas na criação do elemento:

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

Se você dimensionar a tela com CSS, suas dimensões DOM podem ser acessadas por .scrollWidthe .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">

O objeto de contexto permite que você manipule a tela; você pode desenhar retângulos, por exemplo, e muito mais.

Se você deseja obter a largura e a altura, pode apenas usar os atributos HTML padrão widthe height:

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

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

agora, a partir de 2015, todos os (principais?) navegadores parecem baixar c.widthe c.heightobter o tamanho interno da tela , mas:

a pergunta como as respostas são enganosas, porque a tela tem em princípio 2 tamanhos diferentes / independentes.

O "html" permite dizer largura / altura CSS e sua própria (atributo) largura / altura

veja este pequeno exemplo de tamanho diferente , onde coloquei uma tela 200/200 em um elemento 300/100 html

Com a maioria dos exemplos (todos que eu vi), não existe um tamanho css definido, então eles implicam na largura e altura do tamanho da tela (desenho). Mas isso não é obrigatório e pode produzir resultados engraçados, se você escolher o tamanho errado - ou seja, css largura / altura para posicionamento interno.

Nenhum desses funcionou para mim. Experimente isso.

console.log($(canvasjQueryElement)[0].width)

Aqui está um CodePen que usa canvas.height / width, CSS height / width e contexto para renderizar corretamente qualquer canvas em qualquer tamanho .

HTML:

<button onclick="render()">Render</button>
<canvas id="myCanvas" height="100" width="100" style="object-fit:contain;"></canvas>

CSS:

canvas {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  display: block;
}

Javascript:

const myCanvas = document.getElementById("myCanvas");
const originalHeight = myCanvas.height;
const originalWidth = myCanvas.width;
render();
function render() {
  let dimensions = getObjectFitSize(
    true,
    myCanvas.clientWidth,
    myCanvas.clientHeight,
    myCanvas.width,
    myCanvas.height
  );
  myCanvas.width = dimensions.width;
  myCanvas.height = dimensions.height;

  let ctx = myCanvas.getContext("2d");
  let ratio = Math.min(
    myCanvas.clientWidth / originalWidth,
    myCanvas.clientHeight / originalHeight
  );
  ctx.scale(ratio, ratio); //adjust this!
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.stroke();
}

// adapted from: https://www.npmjs.com/package/intrinsic-scale
function getObjectFitSize(
  contains /* true = contain, false = cover */,
  containerWidth,
  containerHeight,
  width,
  height
) {
  var doRatio = width / height;
  var cRatio = containerWidth / containerHeight;
  var targetWidth = 0;
  var targetHeight = 0;
  var test = contains ? doRatio > cRatio : doRatio < cRatio;

  if (test) {
    targetWidth = containerWidth;
    targetHeight = targetWidth / doRatio;
  } else {
    targetHeight = containerHeight;
    targetWidth = targetHeight * doRatio;
  }

  return {
    width: targetWidth,
    height: targetHeight,
    x: (containerWidth - targetWidth) / 2,
    y: (containerHeight - targetHeight) / 2
  };
}

Basicamente, canvas.height / width define o tamanho do bitmap para o qual você está renderizando. A altura / largura do CSS, então, dimensiona o bitmap para caber no espaço do layout (geralmente distorcendo-o conforme o dimensiona). O contexto pode então modificar sua escala para desenhar, usando operações vetoriais, em tamanhos diferentes.

Tive um problema porque minha tela estava dentro de um contêiner sem ID, então usei este código jquery abaixo

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