[HTML5] Canvas met vaste pixeldimensies opschalen

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • Soultaker
  • Registratie: September 2000
  • Laatst online: 15:51
Ik heb een pagina die een bitmap van een vaste grootte rendert (concreet, 320x200 pixels) en ik wil die geschaald kunnen weergeven op de pagina. Het renderen gebeurt in een ImageData object dat met putImageData() afgebeeld wordt op een canvas. Hoe kan ik er voor zorgen dat deze afbeelding geschaald wordt naar de afmetingen van het canvas?

Momenteel heb ik een workaround waarbij ik twee Canvas objecten gebruik. Het eerste is onzichtbaar (zit niet in de DOM tree) en is precies 320x200 pixels groot. Daar render ik dan de ImageData op. Het tweede heeft een variabele grootte en is zichtbaar. Nadat ik het eerste canvas update, teken ik 'm geschaald op het tweede, met behulp van drawImage().

Dit werkt op zich prima, maar ik vraag me af of er geen betere/directere manier is. Nu gebruik ik namelijk drie verschillende buffers (ImageData, Canvas 1, Canvas 2) en dat lijkt me meer dan nodig is, vooral omdat de browser zelf een canvas wél kan schalen zonder de pixeldimensies aan te passen, namelijk als je in de browser inzoomt (met ctrl-plus bijvoorbeeld). Is er een manier om het eerste canvas geschaald af te beelden zonder 'm naar een tweede canvas te kopiëren?