My current script allows me to draw a circle during mousemove, but it's not as fast as I'd like. Before drawing the circle, I gather the color pixel during mousemove in order to draw a circle on the canvas with the picked color.
I came across a solution on GitHub that claims to increase performance on html canvas mousemove image mask
Unfortunately, I can't utilize this solution because I specifically need the pixel color to draw the circle.
Let me show you an example of what I'm aiming for:
https://i.sstatic.net/GKXM6.png
Here is some code that demonstrates how I handle mousemove events:
handlerMousemove: function(e) {
canvasEevents.circleMousemove(e)
},
circleMousemove: function(e) {
if(mousedown.allowBlur) {
var x = (e.clientX - 200) / (zoomValue / 100)
var y = (e.clientY - 38 - 25) / (zoomValue / 100)
//circleBlur(x, y)
circleBlurPixi(x, y)
}
},
function circleBlurPixi(x, y) {
var graphics = new PIXI.Graphics();
graphics.beginFill(0xe74c3c);
graphics.drawCircle(x, y, 100);
graphics.endFill();
pixi_canvas.stage.addChild(graphics);
}
UPDATE : https://i.sstatic.net/UfFg8.png
In the updated image, you can see two lines drawn – one when dragging slowly and another problematic line when dragging quickly.
My goal is to achieve the same result regardless of the speed at which I drag.