Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

EaselJS, Canvas, Bitmap image low quality and registration point not working

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

like image 960
Tim Baas Avatar asked Dec 26 '22 14:12

Tim Baas


1 Answers

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

like image 83
Tim Baas Avatar answered Jan 30 '23 23:01

Tim Baas