Canvas2 | A Metal accelerated canvas for drawing on iOS devices | Canvas library

I am new with Tkinter. I am trying to plot two real-time animated graphs in a window, but two realtime data overlaps onto the same graph after a while. I want them to be displayed on separate graphs. I put a gif to show my output. I want to plot the other data to left graph. Is there any way to fix this? If I can make it I will try to plot three graphs instead of two. Can you help me with my code below?

...

I've got 3 images, 2 are visually identical but they have different file names and one is completely different. I load the images, put them on a canvas, get the image data and compare the image.

The 2 that are visually the same returns true which is correct when comparing 2 that are not visually the same it also returns true which is not correct.

UPDATED from @obscure answer below

...

I have created a resizable split view you can drag the line between to increase and decrease the size of the left and right screens. the right screen consists of two canvases containing 2 images on them we can write on that canvas. The problem is that the body has a height of 100% but the canvas overlapping the

and the HTML, body. HTML and body is not expanding with the canvas as shown in the below image:

Here is the image of the

border consisting of right and left sides and a resizable line between them. I can not resize below the container line because the container is not expanding with the canvas. HTML CODE:

...

Problem: I am having issues with an embedded funcanimation plot in a tkinter GUI. I am having trouble breaking into the funcanimation object to tell it to stop. the consequence of not properly stopping the animation is that I end up with timer after calls happening after my app is closed. An added wrinkle is that when I expand the tkinter window to full screen the animation speeds up significantly but when closing this speed leads to more leftover after calls.

Current Solution: After lots of research on this problem my current solution is to set repeat=False in the funcanimation initiation and then have a function that produces data check a boolean and if False return nothing. This strategy starves the funcanimation of frames and allows it to stop and be killed with the self.ani.event_source.stop() call.

Wrinkle: This solution works great for me while the animation is running slower. here is where the wrinkle comes in; when the window is resized using the windows maximize button in the top right on the window the animation speeds up!. Frame rate goes from 12fps to 25fps. This only happens when resized with the windows button in the top right, if I drag the frame it does not happen leading me to think this is a Windows thing. This increased frame rate persists even after I minimize the window again. Because blit=True the init_func is called on the resize and I can figure out why or how this would speed things up. is there a event flush that happens? What is the resize doing?

Goal: Get the maximum display rate out of my funcanimation from the start (like the speed after I maximize the window) but make sure that all the aftercalls are properly canceled so they are not scheduled after the gui has been closed. see code below. thank you for the help.

Plotting Class:

...

I'm working on customisable dashboard where (amongst other features) users can drag dashboard tiles (div elements) around and reposition those tiles anywhere in the dashboard.

HTML Structure

The html structure is similar to the snippet below

...

I have been struggling to add a working scrollbar to my canvas widget for days. I'm working on a small app to show excel data. I have tried so many things but couldn't achieve a working result :/

I populate canvas2 with "file_opener" function, and I would like to add the scrollbar to the 7th column of canvas2. However, in my previous attempts the scrollbar was appearing only in row 0 and without the functionality.

I would greatly appreciate your help as I'm a self-learning beginner.

This is how it looks: "https://ibb.co/W2d674g"

Here is my code:

...

In my UI I need two canvases, each with their own horizontal scroll bar, but with a single scroll bar controlling the vertical movement of both canvases.

The following code creates two canvases, each with their own horizontal and vertical scrollbars. How can I get rid of one of the vertical scrollbars? Apologies for the length of code, it's as canonical as I could make it.

...

UPDATE: Link to JSFiddle with workable code

I'm making a website and have created a stack of two canvas elements: the top canvas context is a white rectangle that "erases" to reveal an image loaded into the bottom canvas context. The functionality works properly. My issue is that a thin grey border appears on the right and bottom sides of the canvas stack when I include a setInterval line of code.

It disappears when I remove this timer variable (see code below) but reappears if I add any type of state check like onmouseout to the canvas elements. Here is a screenshot:

Any idea why this is happening? Similar SO questions/solutions have not solved my problem.

...

I have a web page with two canvas elements stacked on top of each other. This is the basis for some functionality that lets me "erase" the top canvas to reveal an image loaded into the bottom canvas. The functionality works well.

What I'm trying to do now is trigger an event once the top canvas has been completely "erased" i.e. all of the pixels for the top context are transparent. I've found ways on SO to check a particular pixel's alpha value via getImageData but I'm trying to figure out a way to determine when the very last pixel's alpha value = 0.

I've included my code as well as an unfinished attempt to do this with a for and if loop (but this seems to not be the best approach). Another issue I've discovered is that when I use getImageData a thin grey border appears around two edges of my canvas.

Thanks for any help in advance!

...