0

I have one canvas name mainCanvas.

<canvas id="mainCanvas" style="width: 1440px; height: 1080px; transform: scale(2);"></canvas>

I want copy of this canvas into subCanvas. This is how I copy it:

let subCanvas = document.createElement('canvas');
let subCtx = subCanvas.getContext('2d');
subCtx.drawImage(mainCanvas,0,0);

But the scale is not reflecting in subCanvas. I want subCanvas with zoom image of mainCanvas. How can I add scale and translation?

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Hiral
  • 132
  • 1
  • 12
  • Does this answer your question? [How to get value translateX by javascript](https://stackoverflow.com/questions/42267189/how-to-get-value-translatex-by-javascript) – MaxiGui Sep 02 '20 at 07:51
  • I know the scale that is "2". But I want to add that scale to subCtx. and need zoom image on subCanvas – Hiral Sep 02 '20 at 08:03
  • Well, the `transform: scale` property scales the DOM, not the canvas content – Christian Vincenzo Traina Sep 02 '20 at 08:03
  • I explain it in other words. A canvas is a wrapper of pixels, when you say `transform: scale(2)` you are just telling the browser to zoom the view, without changing the pixels inside – Christian Vincenzo Traina Sep 02 '20 at 08:05
  • Yes. true. But I want to download a zoom image. So I need a solution to convert scale value into drawImage property. So I can download image exactly same as looks in DOM – Hiral Sep 02 '20 at 08:05

0 Answers0