Geek Answers Handbook

Is the Canvas' drawImage method really synchronous?

I use the menu system for my game using canvas (for some performance reasons, I cannot use HTML / CSS to create menus). I have a menu configured using JSON and menuComponent objects created with their respective properties (x, y, width, height, imagePath, etc.). I have a menu loader that then iterates over the component's objects and calls the drawObjects method (all images wait for their onload event to fire first, of course).

In any case, I expect my images to be drawn in the order in which their draw method is called so that they overlap in the correct order. In most cases, this behavior is correct, but sometimes they will be in the wrong order.

My question is: can I trust Canvas to draw images in the order I call drawMethod for these images? Let's say I have an image A, which is, for example, 10 MB and an image B, which is 10 KB. If I call to draw image A and then draw image B, is there a chance that image B will load first because it is a smaller image?

I tried to be smart with my code (having nested components inside my component objects and recursively call draw methods), so there are some race conditions in my code, I just want to confirm that the above behavior is correct. If I add logic so that my objects wait until the ready flag is set, this seems to work. But, unfortunately, this slows down the loading of my menu.

+4
source share
2 answers

To send an official response to this post -

menuLoader, , ( x, y, imagePath, ). , false. onload , true.

setInterval , true. , draw .

+2

. . , . , thoghts .

final ResourceManager rm = new ResourceManager(1000, 1000);
rm.loadImgResource(LandCardResources.INSTANCE.getMeadow(), "meadow", 0, 0);
rm.loadImgResource(LandCardResources.INSTANCE.getHellHorseKnight(), "knight", 150, 150);

- , BackBufferCanvas, (, ). Backbuffer RootPanel, , , . , backBufferCanvas, ResourceManager.

canvas.setWidth(500 + "px");
canvas.setHeight(500 + "px");
canvas.setCoordinateSpaceWidth(500);
canvas.setCoordinateSpaceHeight(500);
RootPanel.get().add(canvas);
rm.drawImageFromMetaDb(ctx, 0, 0, 100, 100, 0, 0, 100, 100);
rm.drawImageFromMetaDb(ctx, 150, 150, 100, 100, 50, 50, 100, 100);

. , , Button rootPanel , rm.drawImage..... . , , backBufferCanvas mainCanvas, .

0

More articles:


All Articles