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
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
Related
I am attempting to resize a canvas chart when a user resizes their browser window. The problem with changing it directly, or so I've found...is that the image disappears during the resizing. Here are some screenshots to help you understand my problem.
This is the chart before resizing.
This is the chart during the resizing. (without targeting the DOM element)
I've identified the chart overflowing on the right hand side.
Chart being resized and targeting the canvas width.
As you can see, the chart disappears.
let canvas = document.getElementById('canvas');
this.canvas.width = ${
event.target.innerWidth - (window.innerWidth / 100) * 2
};
Please let me know what options I have for dynamically resizing canvas charts. Thanks!
P.S. I'm using AngularJs for this particular project.
Update 12/30/2020
Discovered that the obvious reason for the chart disappearing is that the canvas is based on coordinates which originate from a set height/width. So the solution was re-mapping the strokes/fills as the canvas is resizing.
New challenge:
Using clearRect (0, 0, width, height) doesn't clear the canvas. Re-mapping results in an inifite mapping of charts on top of one another. As shown in the photo below.
Is this the solution I get paid a million dollars for? No. But...
After hours of spinning around thoughts as to why the creators never made an easy solution for resizing a canvas, I've finally found an option that works for resizing the charts. Note that if you're scaling up that it can become pixelated. But this option will work.
Instead of defining the height and width with the inline properties:
<canvas id="canvas" height="200" width="600" (window:resize)="onResize($event)"> </canvas>
You should use css to make the height and width 100%. This turns the canvas into an image essentially. Which is why it pixelates when you scale up. The next step is to setup functionality or styling for the element that the canvas is embedded within. This is where the solution arises. Because you can't adjust the canvas without losing the graphic. You have to adjust the element that encapsulates it!
Ex:
<div id="area-chart">
<canvas id="canvas" (window:resize)="onResize($event)"> </canvas>
</div>
You would dynamically adjust the height and width of the #area-chart. I personally suggest using viewport width to define the height as it is the most flexible in terms of scaling and the graphic pixelates far less than using other measurements (%, px, pt, etc.). Of course your needs may be different than mine, but here's some sample styling.
Sample scss:
#area-chart {
#canvas {
width: 100%;
height: 10vw;
}
}
Chart on load:
Chart scaled down:
Chart scaled up:
** note that the pixel dimensions in the screenshots are the full window size and not the size of the element
I have the following code:
https://jsfiddle.net/8o3sn9mh/17/
<canvas id='c' style='position:absolute; left:0px; top:0px;'>
</canvas>
<script>
var
canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var flower = new Image();
flower.src = "http://plainicon.com/dboard/userprod/2803_dd580/prod_thumb/plainicon.com-46129-128px-af2.png"
flower.onload = function(){
ctx.drawImage(flower,0,0,128,128, 0, 0, 30, 30);
ctx.drawImage(flower,0,0,128,128, 0, 0, 218, 218);
</script>
Short story: as you can see the flower doesn't resize well, it's quality is lost.
Long story:
I am making a game with shapes. basically, I use image with ratios such as 128-128 or 80-80 since its designed for phones, and I make sure when I resize the images to keep that 1:1 ratio. With calculations based on the user's window, I decide how much to resize the images proportionally since the canvas is on full screen. It works decent on some screen but on some it doesn't - the images can downscale too much and look poor or upscale too much and look unclear. it is most noticeable on triangle images(I know I can draw pure shapes with canvas but I need to draw faces on them so it is impossible). Any good method to do nicely?
That is the nature of pixel based images.
When downscaling try to keep the image sizes whole ratios, it will improve the quality.
Eg you have 128, then you reduce it to 30, that means pixels are reduced by 128/30 = 4.2666. Pixels are discrete units of information and can not easily be cut into smaller units without loss of quality.
If you changed the size to 32 pixels 128/32 = 4 you get better quality because you are not cutting up any pixels.
For upscaling there is little you can do, Its either blurry or pixelated. Your source images should always be at a higher resolution than you need. Rule of thumb is "only downscale".
If the quality of the images downscaled with whole ratios is not to your liking then the best option is do the scaling in production on photoshop (or the like), then let the device select which images to download. This will give you the best possible quality for all devices and save you and the users some bandwidth (for smaller res devices)
In Easel.js I'm putting a bitmap on the screen that's 1920 pixels wide.
The Canvas itself is smaller (1500 pixels).
However, the Canvas shows the image on the screen and it is not large enough to even reach the edge.
In the code, I'm not scaling the image, the stage nor the container.
How can I get it to show up in its actual pixel size?
Is Easel.js taking screen-density into account? I didn't see a difference between a "normal" screen and a retina display...
Thanks!
Whoops, I'm an idiot. The pivot-point was set in the middle of the image:
bmp.regX = image.width / 2;
bmp.regY = image.height / 2;
Solved it. Sorry to bother you all!
I'm trying to make a full screen game to help me learn JS. I made a canvas item and streched it to the size of the screen using CSS. Then I draw a circle. The issue I have is that the circle looks terrible!
_draw.arc(20, 20, 10, 0, 2 * Math.PI);
Here is a jsfiddle example. http://jsfiddle.net/H5dHD/152/
I've tried using different scale factors (so _draw.scale) but it dosent seem to matter...
What am I doing wrong?
P.S. I know the coordinates are off. I didn't include that code for the example.
The problem is that you resized the canvas using the CSS-style, and do not change the actual width and height. When you use CSS styling to change the size, the canvas will be stretched, but the internal drawing resolution stays the same. The result is that the canvas blurs.
To change the internal resolution, change the width and height attributes of the canvas HTML element itself.
document.getElementById('iDraw').height = screen.availHeight;
document.getElementById('iDraw').width = screen.availWidth;
Here is your updated fiddle:
http://jsfiddle.net/H5dHD/154/
When I first started this project that I'm working on, my canvas size with 1400px wide and 480px tall. I realized that I am going to need to make the canvas the same size as the window itself later, so I did that and everything inside of the canvas zoomed in or something. I set a drawImage(); to be 300 px wide and 180 px tall, and it is a LOT bigger than that, the image is actually the same width as the canvas now. Any suggestions? Here's the link to the project:
http://brycemckenney.com/animation-app
Thank you guys!
You have set the dimensions through css, instead of the physical dimensions of the (image) canvas.
The relevant piece (for others to read in the future) of your code is:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var windowHeight = $(window).height();
var windowWidth = $(window).width();
$(canvas).css({
height: windowHeight - 8,
width: windowWidth - 8
});
Think of it like this: suppose you have a normal jpg-image.
That jpg has it's own 'physical' dimensions (aka width and height).
In both HTML and CSS you can set the dimensions (in px, percent, etc) that you'd like the browser to render (scale) the picture (hey, the picture already has a immutable size right?).
Now for canvas:
In order for canvas to have a physical width/height, you have to set the .width and .height of the canvas-element itself, either in HTML or per javascript (a side-effect is that setting the physical dimensions is that the canvas will clear itself, as per spec).
Then to scale the image (like you did with the above jpg example) you use css (again in px/percent/etc).
I think this is a clever solution by the way to add that new canvas-element to the HTML-Spec!
So, rounding up:
A canvas with a width and a height of 300 px rendered as 100% of a container (like document.body) that measures 900x900px will be scaled-up 3 times!
The reverse (scaling down) will let you draw even more crisp lines by the way!
Hope this helps your understanding!