4

I just started using EaselJS for a project I'm working on and I'm a bit stuck with the Bitmap Class.. What I do is add a 3000 x 4000 image to the canvas / stage and let the user scale and rotate it. Mainly I'm using 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 )

This all works except for the registration point. The number given to the function is half the image width / height, so should be good. But the rotation is still not from the center..

Also I'm looking for a way to increase the quality of this Bitmap or the Stage.. When the Bitmap is scaled to 0.2, the image isn't visible at all, just a bunch of big blocks / pixels..

Hope someone can help me out here,

Thanks in advance

Tim Baas
  • 6,035
  • 5
  • 45
  • 72

1 Answers1

10

Stupid mistake, my canvas was scaled up so the quality was low even if the image wasn't scaled.

The width and height attributes define the canvas resolution.

The css style width and height define the size of the canvas.

For everybody having problems with quality, you can oversample the canvas:

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

<canvas width='400' height='200' />

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

Tim Baas
  • 6,035
  • 5
  • 45
  • 72