Sauvegarder le canevas HTML5 avec upscaling

Question

Je suis en train de développer un éditeur d'image contenant du texte en HTML5. Le canevas que j'utilise a la largeur et la hauteur de 500 pixels en raison du manque de place pour le placer sur la page web. Cependant, j'ai besoin de sauvegarder les données de la toile comme une image à plus grande échelle comme 1000 x 1000 pixels. Comment puis-je atteindre cet objectif? Je recherche un problème similaire sur le Web mais je n'ai pas trouvé de réponse.

Answer 1

Pour ce faire, vous devrez définir les attributs width et height sur la toile à 1000 et 1000. Cela représente la taille native de la toile. Ensuite, vous pouvez réduire la toile en utilisant CSS pour l'adapter à votre page.

Exemple HTML:

<canvas id="theCanvas" width="1000" height="1000"></canvas> 

Exemple CSS:

theCanvas { 
    width: 500px; 
    height: 500px; 
} 

Pour plus d'informations sur natif vs taille de la toile à l'échelle, voir this answer.