compare 2 canvas elements

[Palak Shah]

How do I compare 2 canvas elements which do not have image as code is from client side in c#?
In my automated test - I have case to compare before and after image after certain action is performed, But the problem is it is having canvas element and image is created from client side so I am not able to understand how do I compare in such scenario:

HTML Source Code:

<div class="canvas-container" style="width: 492px; height: 492px; position: relative; user-select: none;"><canvas _ngcontent-ctc-c5="" id="collage-canvas" class="lower-canvas" width="492" height="492" style="position: absolute; width: 492px; height: 492px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas><canvas class="upper-canvas " width="492" height="492" style="position: absolute; width: 492px; height: 492px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: move;"></canvas></div>


The canvas which I need to compare


//canvas[@class='upper-canvas ']

 

[Skydiver]

Why do you think that would help? If the string is the same before and after, then the bitmap created using the data in the stream is also going to be the same.