EaselJS, Canvas, low-quality bitmap and registration point not working

Question

I was just starting to use EaselJS for a project I'm working on, and I am a bit stuck with the bitmap class. What I do is add a 3000 x 4000 image to the canvas / scene and allow the user to scale and rotate it. I mainly use the following function:

@width = 3000 @height = 4000 @scale = 0.2 @bitmap.setTransform( 0, 0, @scale, @scale, 200, 0, 0, @width*@scale/2, @height*@scale/2 ) 

All this works, except for the registration point. The number indicated by this function is half the width / height of the image, so it should be fine. But the rotation is still not off center.

I am also looking for a way to improve the quality of this bitmap or scene. When the bitmap is scaled to 0.2, the image is not visible at all, just a bunch of large blocks / pixels.

Hope someone can help me here

Thank you in advance

Answer 1

Stupid mistake, my canvas was enlarged, so the quality was poor, even if the image did not scale.

The width and height attributes determine the resolution of the canvas .

The width and height of the css style determines the size of the size .

For anyone with quality issues, you can override the canvas:

 <style> canvas { width:200px; height:100px; } </style> <canvas width='400' height='200' /> 

Source: http://blog.headspin.com/?p=464