Jump to content

Phaser print issue with drawGroup


Recommended Posts

Hi all


I have got an issue on printing my canvas.

My web application is a simple tool to build "drawings" with backgrounds and items.

Each item can be turned (rotate) and scaled separately. 


When I try to print the canvas, it appears that some of the positions and properties of each items are not kept.

My javascript code for printing is simple : 

// currengBg is the backgroundvar bmd = game.add.bitmapData(currentBg.width, currentBg.height);// frameSprite is my group of itemsbmd.drawGroup(frameSprite,0,0);var bmdCanvas = bmd.canvas;var bmdDataUrl = bmdCanvas.toDataURL();// function that open a news window for printingprintCanvas(bmdDataUrl);

Here is the result (see attached file) :

- on the left, you can see my canvas + background and sprites

- on the right, result of drawGroup + toDataUrl() function (which is opened in a new window)


Edit :

I'm giving some details to understand the context. 

- rotate and scale are applied to items, relative to my html document

- while drawGroup "translates" rotation and scale relative to the game world 

Am i understanding correctly the phaser drawGroup() function ?


Please does anyone faced this problem ?




Link to comment
Share on other sites

I have digged into phaser code


So it happens to the copy method in BitmapData, but I can't see anything special there

the scaling is done before de rotation, so I guess it should be copied correctly

Then everything is sent to the javascript drawImage function. 

I guess this is how the draw image handles rotation that cause the problem.

Maybe there coule be a trick so that we sort of "freeze" the changes on the sprite before so that even the transformations on the sprite become the default scale and rotation... just an idea

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...