How to fill a shape on mouseover using canvas?

Question

I am trying to make a bowl shape and its content would gradually show as we go over it from bottom to top (and vice versa). here is my code for the bowl and the static filling.

I am new to canvas and to js animation.

Does anyone have an idea and can help me? Thank you:)

 const canvas = document.createElement('canvas') document.body.appendChild(canvas) canvas.width = 800 canvas.height = 500 const ctx = canvas.getContext('2d') ctx.fillStyle = 'white' ctx.fillRect(0, 0, 800, 500) const bowl = new Path2D() bowl.arc(400, 390, 100, 0, Math.PI) ctx.stroke(bowl) ctx.moveTo(300,390) ctx.lineTo(500,390) ctx.stroke() const fluid = new Path2D() fluid.arc(400, 391, 99, 0, Math.PI) ctx.fillStyle = 'red' ctx.fill(fluid)

Answer 1

As I know, you can't do this directly on the item. I mean that you can't add event on the bowl because canvas retrieve the x and y coordinates and "draw" a perpendicular line to the shape to check if there are in the same axis.

Please see this post here How do I add a simple onClick event handler to a canvas element?

Think about use "over" event, because it doesn't work on touch devices.