When I try to rotate bitmap image with createjs (not resize, but just rotate) the bitmap image gets jagged in Chrome. In Firefox it is fine.
Here is my code:
var backCard = new createjs.Bitmap(assetsLoader.getResult("back"));
backCard.rotation = 24;
stage.addChild(backCard);
stage.update();
Any ideas on how to fix this ?
I don't know if you want to prevent or enable antialiasing on Chrome, since for me Chrome gets rotated bitmaps antialiased and firefox don't, so I'll talk about both things...
Enable antialiasing
There's no way of doing this natively, but you can create a workaround if you really want to force antialiasing: adding a blur filter in really small amounts to rotated images. But keep in mind that blur is a really expensive filter that you should avoid using, but in case you use it, you'll need to cache the bitmap after applying the filter to reduce CPU usage.
backCard.filters = [new createjs.BlurFilter(2, 2, 1);]; // 2 is blur radius, 1 is blur quality. More quality means more expensive blur.
var bounds = backCard.getBounds();
backCard.cache(bounds.x, bounds.y, bounds.width, bounds.height);
Prevent antialiasing
I think there's no way of doing so yet too, but you can use the next version of EaselJS which allows you to define if objects will be antialiased for the stage, because of WebGL. Note that if WebGL isn't supported on the user's browser EaselJS will fallback to HTML5 Canvas, which will still have antialiasing.
Related
I'm developing a webgl application (a simple solar system) and everything looks fine on Chrome and Firefox on ONE monitor
But if I start eyefinity (three monitors each full hd + bezel compensation) the solarsystem is distorted in chrome.
In Firefox it looks correct and really nice:
http://kritten.org/pictures/firefox.jpg
In Chrome it looks like this:
http://kritten.org/pictures/chrome.jpg
It seems that the principal point (is this the right name?) is in the wrong location.
If I move forward in Firefox I actually move forward, but in Chrome I move to the right. So it keeps this distortion any time.
Are there any ideas what could be wrong?
The issue with Chrome is it's got a limit on the size a canvas can be. This is part of the WebGL spec although arguably Chrome should fix it. You can try to encourage them to fix it here.
The specific issue is that the WebGL spec says that even though you may ask for a canvas of a certain size WebGL might give you a smaller drawingbuffer. This was specifically because graphics cards have a size limit. Some are as low as 1024. Let's say some card has a limit of 2048. You've got one monitor that's 1280x1024. No problem.
You now add a second monitor for a total desktop space of 2560x1024. You now stretch a window across both monitors. You ask for a canvas of size 2560x1024. What should happen? WebGL can't make one that big, the GPU says it has a limit of 2048. So there were 3 option
Crash. That's no go
Force the canvas to stay under 2048
Let the canvas be stretched to 2560 but make the drawingbuffer the limit which is 2048 in this example
The WebGL committee picked #3 because it's the one least likely to cause problems. The worst that happens is you get a distorted image but the user can scale the window back down until things are normal so your webpage doesn't die.
Unfortunately 99.99% of WebGL programs ignore this feature of WebGL and so you get this distorted image when you run into that part of the spec.
In this particular case though the limit isn't in your GPU it's in Chrome. The proof is that it works in Firefox. Again you can try to encourage them to fix it here.
If you'd like to make your program work around it you need to look up what size the canvas's drawing buffer was actually made and use that in the correct places. You can find out but checking gl.drawingBufferWidth and gl.drawingBufferHeight
That means first set the camera aspect to the size the canvas is actually displayed. You really should always do this
aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
perspective = yourPerspectiveFunction(fov, aspect, zNear, zFar);
In three.js that would be
camera.aspect = renderer.domElement.clientWidth /
renderer.domElement.clientHeight;
camera.updateProjectionMatrix();
You should set your viewport to the size of the drawingbuffer
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawBufferHeight);
In three.js that would be
renderer.setViewport(0, 0, renderer.context.drawingBufferWidth,
renderer.context.drawingBufferHeight);
That should also always work.
If you're doing anything else related to the width and height of the canvas (picking, scissor, etc..) you'll need to do the appropriate math to convert from the size the canvas is being displayed to the size of its drawingbuffer
That will get rid of the distortion, of course since Chrome will actually only be creating a smaller drawingBuffer you'll get some scaling.
I am using HTML 5 canvas for drawing image and drawing annotations on that using paper.js.
I am trying to implement zooming functionality for Canvas. For this I am using scale function for that. As user try to do zoom then first i scale the canvas and then redraw the content.
But suppose if, there is much content on the Canvas, then it make slow to the process. It takes some while to render.
What can I do for this ?? Please suggest me feasible solution.
you can try with WEBGL rendering , WebGL is hardware accelerated so smoother operations than canvas. Three.js library provides webGL rendering option , latest browser version supports it.
When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality.
But if I add that same image as an <img/> and scale it down, it retains its quality.
Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does?
It should probably go for a comment, but unfortunately I am new here and I can't add comments.
However, to me it looks like antialiasing issue. Canvas is just bunch of pixels - it's up to you whether you do some antialiasing or not. Browsers however do some antialiasing on picture scaling (see here Disable antialising when scaling images).
This question might be a duplicate of:
Html5 canvas drawImage: how to apply antialiasing
HTML5 Canvas and Anti-aliasing
Hope it helps.
I know IE6/7 does not natively support canvas and so I'm using excanvas.js for IE browsers. I have a script which draws two images onto a canvas tag.
Eg.
var canvas = $('.map_container')[0];
var context = canvas.getContext("2d");
context.drawImage(images.national,getPositionOrScale(0),getPositionOrScale(0),getPositionOrScale(images.national.width),getPositionOrScale(images.national.height));
Now I call context.drawImage on two different images and both images are drawn but when I'm in IE6/7 and I go to print preview or print it. It only prints the last img which was drawn.
Any ideas why it cant print the full canvas as is?
I figured out that they get layered on top of each other. I'm sure this is ancient history for you, but if you put one of the two in a div with a height set to the size of the canvas, you should be able to see both.
I created an animated HTML5 canvas that uses bezier curves to draw a filled pattern.
I have been testing it in Chrome for Mac. I only seem to see this on Safari for Mac.
For some reason, I see little artifacts left behind by the figures (see below that is moving to the left and the artifacts go off to the right).
I trigger a redraw by changing the width of the canvas to its current width, if that helps...
Also, if I mouse over the canvas or change windows the artifacts go away. Since I think it decides to redraw the whole thing over.
Does anyone know why this would be happening?