Équivalent de la viewBox SVG sur canvas

[Maks]

Je me suis mal expliqué ^^

Tu as toujours ton "petit" canvas, <canvas width="800" height="600"></canvas>

Cependant, tu peux parfaitement mettre en cache un canvas de 1500x1500 par exemple.

function buffer() {

  var buffer = document.createElement('canvas');

  buffer.width = 1500;

  buffer.height = 1500;

  var ctx = buffer.getContext('2d');

  // bon ensuite tu fais ce que tu as à faire avec ton contexte

  return buffer; // tu peux retourner un canvas tel quel, petite astuce niveau perf, tu peux renvoyer une image ou un blob mais c'est pas le sujet

}

Ensuite tu utilises drawImage() sur ton canvas de 800x600 en passant en premier paramètre ton buffer et en jouant sur les 8 paramètres pour "découper" ton buffer (https://developer.mozilla.org/en-US/docs...ing_images à titre Slicing) en fonction de ton viewport car je te déconseille de redessiner les 1500x1500 pixels à chaque fois sous peine de performances médiocres

Ensuite lorsque tu te déplaces, il faudra alors utiliser translate() vers la gauche lorsque tu te déplaceras vers la droite par exemple