Comment redimensionner l'élément html canvas ?

Question

J'ai un élément canvas défini statiquement dans le html avec une largeur et une hauteur. Si j'essaie d'utiliser JavaScript pour le redimensionner dynamiquement (en définissant une nouvelle largeur et une nouvelle hauteur - soit sur les attributs du canevas, soit via les propriétés de style), j'obtiens l'erreur suivante dans Firefox :

exception non attrapée : [Exception... "Opération illégale sur l'objet prototype WrappedNative" nsresult : "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" localisation : "JS frame : : file:///home/russh/Desktop/test.html : : onclick : : line 1" data : no]

Est-il possible de redimensionner cet élément ou dois-je le détruire et créer un nouvel élément à la volée ?

Answer 1

Vous n'avez pas publié votre code, et je soupçonne que vous faites quelque chose de mal. Il est possible de changer la taille en assignant des attributs de largeur et de hauteur en utilisant des nombres :

canvasNode.width  = 200; // in pixels
canvasNode.height = 100; // in pixels

Au moins, ça marche pour moi. Assurez-vous de ne pas attribuer de chaînes de caractères (par exemple, "2cm", "3in" ou "2.5px"), et ne jouez pas avec les styles.

En fait, il s'agit d'une connaissance accessible au public - vous pouvez tout lire à ce sujet dans la spécification du canevas HTML - il est très petit et inhabituellement informatif. Voici l'interface DOM complète :

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL();
  DOMString toDataURL(in DOMString type, [Variadic] in any args);

  DOMObject getContext(in DOMString contextId);
};

Comme vous pouvez le voir, il définit 2 attributs width et height et les deux sont unsigned long .

Answer 2

Je viens de rencontrer le même problème que vous, mais j'ai découvert la méthode toDataURL, qui s'est avérée utile.

En gros, il s'agit de transformer votre canevas actuel en une dataURL, de modifier la taille de votre canevas, puis de redessiner ce que vous aviez dans votre canevas à partir de la dataURL que vous avez enregistrée.

Voici donc mon code :

var oldCanvas = canvas.toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
img.onload = function (){
    canvas.height += 100;
    ctx.drawImage(img, 0, 0);
}

Answer 3

Notez que si votre canevas est déclaré de manière statique, vous devez utiliser l'option width et height et non le style, eg. ça va marcher :

<canvas id="c" height="100" width="100" style="border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

Mais cela va pas travail :

<canvas id="c" style="width: 100px; height: 100px; border:1px"></canvas>
<script>
    document.getElementById('c').width = 200;
</script>

Answer 4

Cela vient de fonctionner pour moi :

<canvas id="c" height="100" width="100" style="border:1px solid red"></canvas>
<script>
var c = document.getElementById('c');
alert(c.height + ' ' + c.width);
c.height = 200;
c.width = 200;
alert(c.height + ' ' + c.width);
</script>

Answer 5

<div id="canvasdiv" style="margin: 5px; height: 100%; width: 100%;">
    <canvas id="mycanvas" style="border: 1px solid red;"></canvas>
</div>
<script>
$(function(){
    InitContext();
});
function InitContext()
{
var $canvasDiv = $('#canvasdiv');

var canvas = document.getElementById("mycanvas");
canvas.height = $canvasDiv.innerHeight();
canvas.width = $canvasDiv.innerWidth();
}
</script>