Définir les dimensions "internes" de la toile?

Question

je peux définir la largeur et la hauteur de ma toile en définissant les attributs width et height comme ceci:

<canvas id="canvas" width="510" height="510"></canvas> 

Mais je ne veux pas coder en dur tout mon code de dessin à dépendre de ces valeurs. Je voudrais définir la largeur/hauteur "interne" pour dire, 100x100 et puis dessiner tout dans ces coordonnées, et faire évoluer le canevas (de la même manière que je le fais en OpenGL). De cette façon, si jamais je redimensionne ma toile, ça reste bien. J'ai compris que si je définissais la largeur et la hauteur du CSS sur le canevas, je pouvais le faire plus grand, mais garder les mêmes unités, mais j'ai trouvé que ça étirait le résultat et ça brouille et ça a l'air terrible (je le pensais restitue toujours comme un vecteur, agréable et croustillant).

Existe-t-il un moyen de le faire?

Answer 1

Vous pouvez dessiner tout en coordonnées "locales", puis, comme la première chose que vous faites lorsque vous dessinez, redimensionnez le contexte en fonction de la taille relative de la toile réelle.

E.g.

HTML

<canvas id="c" width="510" height="510"></canvas> 

JS

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

ctx.scale(5.1,5.1); 
// Everything drawn here is in a 100x100 world, 
// but gets scaled to be in the 510x510 canvas 
ctx.fillStyle = '#000'; 
ctx.fillRect(0,0,100,100); 
ctx.strokeStyle= '#F00'; 
ctx.lineWidth = 1; 
ctx.strokeRect(5,5,90,90);​​​​​ 

Running example