Tips for enhancing the speed of drawing circles in mouse movement using JS and CANVAS

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.

Answer №1

Could the constant generation of graphics with every mouse movement be contributing to the decrease in performance? One potential solution could be to establish a global graphic and draw circles on it whenever needed, rather than creating a new graphic each time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with CSS transition not displaying ng-show elements properly

I'm currently working on incorporating a fade-in effect for text using the second solution from this source when using ng-show. Here is my HTML setup: <input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Cli ...

notify a designated channel when ready for launch

I'm currently attempting to figure out how to send a message to a channel when the Discord bot is launched. I've experimented with this code: client.on('message', (message) => { client.on('ready', () => { channel = cli ...

Leveraging electron-usb alongside electron

I attempted to integrate the electron-usb library into my electron project. Upon running npm start with require('electron-usb') in my index.html file, an error is displayed in the console: Uncaught Error: The specified procedure could not be fo ...

Troubleshooting the failure of the fetch function in my React application

Currently, I am delving into full-stack development with a focus on Js, React, and Express coupled with a Postgres database. The server is configured to run on localhost:5003, and the backend app.js file contains the following code: const express = require ...

Troubleshooting issues with static serving in Express.js

I'm facing an issue while trying to apply a bootstrap theme to a file created using Jade. The error message indicates that it cannot GET the file. Main JavaScript code snippet: const express = require('express'); const app = express(); ap ...

Understanding the significance of an exclamation point preceding a period

Recently, I came across this code snippet: fixture.componentInstance.dataSource!.data = []; I am intrigued by the syntax dataSource!.data and would like to understand its significance. While familiar with using a question mark (?) before a dot (.) as in ...

Steps for handling errors in Node.js when the query result rowCount is 0 and throwing an error in response

If the rowcount is 0, I need to send a response as failed. If the rowcount is 1, I need to send a success status. Can someone please assist me with this? When I try to print (client.query), it displays the result in JSON format (refer to attached image). ...

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

Seeking assistance with transmitting data to the server and retrieving it for use. I am looking to achieve this goal utilizing JavaScript with Node.js

I've been experiencing challenges with the interactions between front-end and back-end. I am confident that I am sending the data, but unfortunately, I am unable to access it afterwards. Recently, I utilized this code template (sourced from Mozilla&ap ...

Updating the src of an iframe and adding an onclick event to a link using JavaScript

Looking to design a page that accommodates both login and sign up functionalities by dynamically updating the src of an iframe. In the navigation bar, there is: <li id="change"><a onclick="sign()">Sign up</a></li> And within the ...

Are the commands overlapping?

Currently, I am in the process of developing a dynamic discord chat bot using JavaScript and node.js. One of my goals is to implement a specific command without interfering with an existing one. The bot functions flawlessly across all servers where it is ...

Transform post-back into PHP using JSON for Ajax posting

Currently, I am facing a challenge in integrating a Codeigniter application into Wordpress using a plugin. The trouble arises when the control encounters an issue while confirming the data for a new appointment. VIEW <div id="wizard-frame- ...

streaming an HTML5 video directly from memory source

After retrieving multiple encrypted data using ajax queries and performing necessary manipulations to turn them into a valid video, I find myself at a standstill. The binary of the video is now stored in memory, but I am unsure how to display it. To confi ...

Non-IIFE Modules

Check out this discussion on Data dependency in module I have several modules in my application that rely on data retrieved from the server. Instead of implementing them as Immediately Invoked Function Expressions (IIFEs) like traditional module patterns ...

Removing text that was added via the chart renderer in Highcharts can be accomplished by identifying the specific element

Instead of using a legend in my graph, I have added labels directly to the series (view example here). After drawing the graph with these labels attached, the user can click a button to add another series which hides some existing lines successfully. Howev ...

The condition is not established by the Firestore where clause

I'm working on a function that includes two where clauses. My objective is to verify the existence of a document based on the presence of two specific IDs. However, when I execute the function, it retrieves all the records in the collection instead. C ...

Is there a way to increase the size of the icon without altering the dimensions of the button?

After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds. However, I d ...

The server's delayed response caused the jQuery ajax request to be aborted

Encountering delayed AJAX response from the PHP server upon aborting the AJAX request. Currently utilizing the CodeIgniter framework for the server script. Javascript Code: cblcurrentRequest = $.ajax({ url: baseurl + 'Login/getChannelBra ...

AJAX request is successful, however, the database remains empty with no data being inserted

I have been attempting to utilize ajax and php to insert data into a database, but for some reason, it is not functioning as expected. Despite validating all the itemName, category, and price fields in the html file, the data being inserted into the data ...

Loading static assets in Express.js

I am currently utilizing express for developing a web application. However, I am encountering issues with my routes and static files. I have included a reference to static files: app.use(express.static(path.join(__dirname, 'public'))); and conf ...