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?
Related
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.
While testing an SVG animation I've run into a rendering problem in Chrome Version 23.0.1271.95.
The animated triangles seem to leave some black vertical banding.
This goes away if you tab away from the page and back or if you otherwise force a redraw.
You can find the animation test here:
http://bit.ly/HexaGridTest
And here's a screenshot:
Looking at other posts on similar issues it seems that the only way to eliminate this GPU-acceleration-related problem is to force a redraw at the end of the animation.
Someone suggested adding -webkit-backface-visibility: hidden to the SVG, but this didn't solve the issue for me.
Is there any alternative? Any flag or CSS property I could set to avoid the artifacts?
We have a website that used HTML5 canvas and KineticJS to scale and resize and rotate an image on top of another image and then save them together as a new image. For some reason it does not show up correctly in IE9. It works perfect in FireFox, Chrome and Safari, but in IE9 the only thing that does not work is the rotate tool. Which is set in 15 degree increments and works by dragging the slider either left or right and it rotates the images slightly by 15 degrees depending on the direction you drag it.
Could it not be working because IE9 is not supporting the html5 tag..I am confused.
When a photo is displayed on a HTML5 canvas element, and is rotated, the result looks fine in FireFox but terrible in Chrome. It seems as if Google Chrome does not know how to smooth the rotated edges.
For an example take a look at http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
Make one of the photos big and have it rotated slightly around its center. Turn on the 'simple mode' so that the photo gets a white border for maximum contrast. You will now see that the edges of the photo are anything but smooth. In FireFox the result is much better!
Does anyone know if this problem can be fixed?
The Chrome team has been breaking and unbreaking anti-aliasing of different parts of Canvas for a year and a half now.
Lots of bugs crop up with the same problem: http://code.google.com/p/chromium/issues/detail?id=7508
Unfortunately, waiting is your only recourse here, unless you want to make an anti-alias effect yourself, which is possible but a lot of work for something that "should" look consistent
I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation is based on ideas from this page. But that's not really important. The problem I am having is that using the 'source-in' composite operation is not giving me the results I expect and would like clarification as to why. I think it only works on chrome, not working on FF 3.6.
The black rectangle is supposed to act as a 'mask' for the page being turned over. All I want to see is the turning page in the areas where it overlaps the mask. The problem is the entire black rectangle is drawn, not just the area where they overlap.
I know HTML5 isn't really being used yet, I'm just experimenting for my personal site and curiosity. Any ideas would be greatly appreciated.
Canvas Compositing support was broken and might still be incomplete in some browsers.
Compare the images here
with the actual rendering in your browser to see what works in which browser right now.