0

I am trying to create a mirror image transformation (and later an angled transformation) of dynamically generated group of lines in canvas. I'm attempting to do so by flipping the canvas and drawing a symmetrical line at each step, like so:

  • Generate random variables

  • Draw line

    ctx.save();

    ctx.scale(-1,1);

  • Draw line in flipped context

    ctx. restore();

I don't think the context is flipping appropriately because if I set scale values to, say, -5 and 5 they thicken my lines without flipping them.

Full attempt: http://codepen.io/RadaCodes/pen/RKQOXW?editors=1010

Please suggest what I'm doing wrong. Thank you.

Rada Lu
  • 33
  • 4
  • 1
    You need to `translate()` your matrix in the opposite direction : `ctx.scale(-1,1); ctx.translate(-ctx.canvas.width,0)` http://codepen.io/anon/pen/KaoXmo?editors=1010 – Kaiido Feb 02 '17 at 02:10
  • Possible duplicate of [How to horizontally flip an image](http://stackoverflow.com/questions/35973441/how-to-horizontally-flip-an-image) – Kaiido Feb 02 '17 at 02:16
  • Thank you so much Kaiido, this does it. Cheeers. – Rada Lu Feb 02 '17 at 02:32

0 Answers0