Coloring HTML5 canvas regions on mouse over – Part 1

It’s gonna be about JS. Well, the blog name says MOSTLY Unity right? 😉

Some time ago I had a client who had a very fun request. He wanted to be able to upload an image of a thing – let it be a piece of furniture or anything else – and while hovering over that image, the user would see a tooltip with information about the specific part he would be pointing at with his mouse. Fun, right? Long story short, after some tough negotiations I explained that given the timeframe it’s impossible or at least impossibly hard to make a component that would allow his company to upload just any image containing different colors, shapes etc. and create an algorithm that would recognize sections of that image in order for the client employees to label and describe them. I mean, yeah, we could probably achieve something with AI… Anyway, it all boiled down to uploading just a template that would contain only one color + transparency. Then my client would be able to mark a given section of that template as anything and everything.

In this (and the upcoming one) article, I will present you a minimal version of the code I used. Continue reading “Coloring HTML5 canvas regions on mouse over – Part 1”