r/learnjavascript • u/sophomoric-- • 15h 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?

2 Upvotes

75% Upvoted

6 comments sorted by

3

u/nebula_gem 14h ago

monkeypatching native canvas methods breaks internal state because the browser optimizes path operations assuming standard coordinate math. Use a transform wrapper or apply ctx.scale(1, -1) once at initialization to invert the axis permanently without overriding individual methods.

1

u/skamansam 15h ago

If you shared some code with us, it would be easier to see what you are doing. Try opening a codepen and pasting some code there.

2

u/sophomoric-- 15h ago

thanks - seems you can include a transform for canvas that may fix this. I'll try that and update tomorrow.

1

u/azangru 15h ago

This is just not a good idea.

If you dislike the canvas api and want to use your own instead, write your own library.

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 suppose you could combine the two approaches? A facade object that proxies method calls to a canvas, unless they are some special methods that you want to handle differently?

1

u/regardedMAGAfascist 4h ago

Abstraction abstraction abstraction.

1

u/azhder 4h ago

Sometimes in programming, you do the tedious job. Or write the code that does the tedious job for you. If you think you have to duplicate all the methods, you got some of the design wrong. In my work, I rarely use objects and methods i.e. classes as in OOP, but as I remember, the idea behind the methods and private fields is that they act as a facade, so... What do you mean by facade in your case?

Oh, don't use the Proxy object. It is a good object to be used when necessary, but your case... I don't think so. You just have a problem with abstraction in your own OOP design.

And do not monkey-patch anything. At this point I am not sure you and I mean the same thing. You're talking about overriding, not monkey-patching. You're talking about polyfills, but done in the bad way, like in the early 2000s. Do not do that either. Both things are so problematic, just saying that is like saying "goto considered harmful".

My advice: fix your abstraction or add if it wasn't there. Maybe tell people they should use your own object, not the canvas directly and don't make any promises if they try to use it directly. It will be either your object that does the inversion invisible or not use it at all. Oh, and please add them the option to opt in or out of it at the beginning, some flag in the constructor or whatever.