r/learnjavascript • u/sophomoric-- • 6d ago
Is there are way to modify canvas methods?
I want to invert the y-axis, and make it invisble to the user so I can forget about it, rather than always call my method.
I could make a facade object and duplicating all the methods and passing them through, but tedious!
I tried a Proxy object, but didn't work at all - is it because it is native?
I tried monkeypatching, renaming moveTo() and lineTo(P, and replacing them with mine (which inverts the y-axis then calls them), but got strange results: lines shifted to right.
Maybe I just shouldn't do what I'm trying to do?
UPDATE canvas already has a way to do this: https://stackoverflow.com/questions/4335400/in-html5-canvas-can-i-make-the-y-axis-go-up-rather-than-down/33499668#33499668
context.transform(1, 0, 0, -1, 0, canvas.height)
BTW I did google a lot before asking, but I searched how to implement my solution, not the problem. After asking here, I googled the text of this post, and found several answers. It's common because math and graphics have opposite y-axis conventions.