is HTML5 canvas context gradient expensive?

Question

On every mouse move I need to draw on my canvas a radial gradient (well, a circle filled with a radial gradient with the cone centered inside the circle) with the center at the current mouse position.

It seems that to do that I need to create a new radial gradient object every time I receive a mouse move event because the center of the gradient must be set to the mouse position. Or can I use some sort of transform to shift the existing gradient so that if fills my circle at the right position?

In other words, is creating a new gradient object every time expensive? Does anyone have any experience with this?

Answer 1

I do not have experience with this, but I'm sure drawing a new gradient for every mouse move is expensive. Instead, you can try to translate or transform the entire canvas context to achieve your goal. See the link below for more details on how to do the translation of the context.

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/