Eu tenho 2 canvass, uma usa atributos HTML, width
e height
para dimensionar, a outra usa CSS:
Compteur1 exibe como deveria, mas não compteur2. O conteúdo é desenhado usando JavaScript em uma canvas de 300×300.
Por que há uma diferença de exibição?
Parece que os atributos width
e height
determinam a largura ou a altura do sistema de coordenadas da canvas, enquanto as propriedades CSS apenas determinam o tamanho da checkbox na qual ele será mostrado.
Isso é explicado em http://www.whatwg.org/html#attr-canvas-width (precisa de JS) ou http://www.whatwg.org/c#attr-canvas-width (provavelmente comerá seu computador) :
O elemento
canvas
possui dois atributos para controlar o tamanho do bitmap do elemento:width
eheight
. Esses atributos, quando especificados, devem ter valores que sejam números inteiros não negativos válidos . As regras para analisar números inteiros não negativos devem ser usadas para obter seus valores numéricos. Se um atributo estiver faltando ou se a análise de seu valor retornar um erro, o valor padrão deverá ser usado. O atributowidth
padronizado para 300 e o atributoheight
para 150.
Para definir a width
e a height
você precisa, você pode usar
canvasObject.setAttribute('width', '475');
Para elementos , as regras CSS de
width
e height
definem o tamanho real do elemento de canvas que será desenhado para a página. Por outro lado, os atributos HTML de width
e height
definem o tamanho do sistema de coordenadas ou ‘grid’ que a API de canvas usará.
Por exemplo, considere isto ( jsfiddle ):
var ctx = document.getElementById('canvas1').getContext('2d'); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 30, 30); var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "red"; ctx2.fillRect(10, 10, 30, 30);
canvas { border: 1px solid black; }
A canvas será esticada se você definir a largura e a altura do seu CSS. Se você quiser manipular dinamicamente a dimensão da canvas, use o JavaScript da seguinte forma:
canvas = document.getElementById('canv'); canvas.setAttribute('width', '438'); canvas.setAttribute('height', '462');
O navegador usa a largura e a altura do CSS, mas o elemento da canvas é dimensionado com base na largura e na altura da canvas. Em javascript, leia a largura e a altura do CSS e defina a largura e a altura da canvas para isso.
var myCanvas = $('#TheMainCanvas'); myCanvas[0].width = myCanvas.width(); myCanvas[0].height = myCanvas.height();
Correção Shannimal
var el = $('#mycanvas'); el.attr('width', parseInt(el.css('width'))) el.attr('height', parseInt(el.css('height')))
Se você quiser um comportamento dynamic baseado em, por exemplo, consultas de mídia CSS, não use atributos de largura e altura da canvas. Use regras CSS e, em seguida, antes de obter o contexto de renderização de canvas, atribua a largura e altura aos atributos os estilos de largura e altura CSS:
var elem = document.getElementById("mycanvas"); elem.width = elem.style.width; elem.height = elem.style.height; var ctx1 = elem.getContext("2d"); ...