Dealing with Canvas is painful. I recently ran into a weird image distortion issue on Samsung Internet Browser 12 (I guess it's based on the Chrome engine) when drawing a video frame to a canvas context using `drawImage`.
Since you've made Canvas your focus, I'm curious if you've seen this or have any ideas. Here are a couple reports I found online.
This one shows exactly what I see (note: this is not my post), and I was able to "fix" it using the technique in the question. I'm not particularly happy with that solution so I'm still working to understand what's going on.
I don't have an answer for you, except to say that getting <video> and <canvas> elements to play nicely with each other across all browsers and devices is pretty much guaranteed to damage your day, week, or even your month.
My Google searching bought me to this posting about Samsung Internet's Video Assistant feature (Nov 2019). My gut feeling is that the Video Assistant is possibly getting in the way of your code executing as expected? https://www.xda-developers.com/samsung-internet-10-2-stable-...
One month is about right when you add it all up. Not fun.
Thanks for the suggestion. I have only found this to be an issues with version 12 and on. I have examples from version 9 & 11 that work as expected (both before and after video assistant was introduced). And I'm able to reproduce the issue with the video assistant turned off.
Of course, none of that is to say it's not related to the video assistant in some way. I just don't have evidence of that yet.
Haven't had a chance to look at the code yet, but how did you address responsiveness? It took us a long time when writing chart.js to get that working well on with different browsers, devices, and screens (high resolution screens require extra code)
First: chart.js[1] is an excellent library. If people need to add chart infographics to their website I strongly recommend they use a dedicated charting tool (like chart.js) rather than my library.
Like you, I've had to do a lot of coding and experimentation to get responsiveness working the way I think it should work. Much of it runs off the idea of drawing everything to a hidden canvas and then copying that canvas's contents over to the displayed canvas as the last step in the display cycle. I tried to mimic this functionality on the CSS object-fit property[2]. If you're interested in the code, you can find it here - https://scrawl-v8.rikweb.org.uk/docs/source/factory/cell.htm...
The other thing I've done is to introduce relative positioning for drawing stuff on the canvas. The native Canvas API drawing functions expects coordinates etc to be in absolute value pixels; my library allows coders to define positions and dimensions in String percentage values which will update (via dirty flags) each time a change in the canvas dimensions is detected.
Caveat: my library has not been tested (as far as I'm aware) across a wide variety of browsers and devices. I expect there will be plenty of improvements to be made once that happens.
There are a number of excellent libraries ('products' - I use the terms interchangeably) dedicated to making development with the <canvas> element a lot easier; they all have a strong basic use case because coding scenes using the native Canvas API is very low-level, repetitive and easy to get wrong. Some of my favourites include Fabric.js, Konva and Pixi.js.
