Question

Basically I am attempting to make an HTML5 audio player but want to do the majority of the controls with canvas. Why? I want to try something new while learning something new. I have gotten everything working so far – that is, a seekable timeline, play/pause buttons, etc. – by essentially using mouse coordinates to decide what the user is clicking on.

Im mainly curious what the more experienced web developers out there think of this. Is it dumb? Is there an issue you think I may not foresee?

I’ll post some code if anyone is really interested, but I havent had any issues so far so I dont really need and troubleshooting.

Thanks!

Answer 1

For a learning experience? Great! You’ve clearly figured out how <canvas> works, how to manipulate objects on-screen, and how to make those objects interactive.

In a production app? Not a chance. What immediately comes to mind:

• It’s not accessible. <button> has a semantic meaning that a screen reader can take advantage of. A canvas means nothing; in your example, a blind user has no idea there even are play/pause buttons, much less how to activate them.
• You’re reinventing the wheel for no real gain. Let the browser handle the details of whether an object was clicked. Have you accounted for zoom? Keyboard interaction?
• You lose out on a wide array of pre-baked widgets.
• Your implementation is guaranteed to have a bug somewhere. A <button> is guaranteed to be a button.