Playwright assertions on canvas - playwright

Can Playwright be used for assertions on the Canvas element, like an object or a shape is present on the canvas element. This is mainly to test the components that are created by the JavaScript logic.

Related

Select canvas shapes in Konva.js for testing

I have hundreds of shapes in canvas when onClick on a shape will take an action.
In my feature test, I am currently simulating the mouse click on a particular pixel. However, this is not ideal because the position of the graph may change. Unlike SVG, canvas doesn't expose the particular shape in the DOM. Is there a way to select the shape in a canvas by id for testing purposes?
You can use selectors to find any node inside the stage https://konvajs.org/docs/selectors/Select_by_id.html
const shape = stage.findOne('#id');

Can you fill a shape with a canvas

I would like to be able to fill a shape with a canvas; potentially to have one konva canvas generate an animation and update another konva canvas shape with it, masked inside a path. Is this possible?
Its not totally clear what you actually want to do, but what you describe is probably achievable with Konva layers. You see Konva is a wrapper for HTML5 canvas and one of its features is layers - so you have one Konva instance that must have a minimum of one layer but can have more. Konva cunningly uses a separate HTML5 canvas for each layer. See the example here in the Konva docs. If you hit F12 you can see the two canvas elements used, and there is a code sample too.
This gives a lot of power and some great performance management potential. And it is all baked in to Konva already so you will not have to manage multiple canvas instances in your own code.

Add konva js into existing canvas

Is it possible to add konva js into existing canvas?
the canvas class is "custom" and it does not have an id is it possible to initiate Konva stage directly into a canvas instead of a container?
At the current moment (v1.1.8) Konva doesn't support this a use case. You can't use Konva with the existing canvas element.
You can use it only with <div> container.

How can I make Openlayers3 tiles fade in as they load?

I'm using some tile layers in Openlayers3 (3.5.0), of different kinds (XYZ and plain TileImage). I want to make the tiles fade in as they are loaded.
I have found that the tile sources I'm using emit a tileloadend event (also tileloadstart and tileloaderror) and I can successfully catch this. Its event object gives me access to the corresponding ImageTile object, which has methods to get its coordinates and to get an image element.
The image element is a DOM image element in my case, but which is not actually attached to the DOM. It's not on the page -- it's just the source which is then loaded into the canvas element, as far as I can tell. So I'm not sure this actually helps me to fade it in.
Is there any way to do this?

C# XNA - Drawing into a form that is bigger than the main window

Drawing into a form that is bigger than the main window with GraphicsDevice.Present results in the form cutting the stuff that is drawn along an imaginary border, which has exactly the size of the main window. I added a picture to be clear
The red rectangle has the same size as the Main Form.
Main Form is an XNA Game, whereas Secondary Form is a Windows Form, which Main Form draws on with GraphicsDevice.Present
I tried setting the Viewport which results in an exception.
Use the official WinForms sample. It has correct support for multiple windows (and includes an explanation of how it works).
The Game class doesn't support this.

Resources