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.
Related
I have converted a badge/image from PNG to SVG in order to be able to re-use the asset in various sizes etc.
The problem is that depending on the specific webpage i'm embedding the SVG on, it either looks super crisp (as intended) or looks bad with some sort of anti-aliasing gone horribly wrong.
Even on the pages where the SVG looks crisp after load, I only have to scroll the page a bit until it looks horrible as well.
Please look at the screenshots below to see the exact difference on the BADGE (SVG):
It seems the browser only messes with the SVG right where the SVG meets the image behind it. The SVG is only slightly transparent in the gray center, so that should not be the cause of it.
I have tested in Chrome, Edge, Safari which all do the same thing.
Does anybody know what might be the cause of this?
I found a fix to what clearly seems to be a somehow undiscovered big bug in all modern browsers in regards to handling SVG through CSS as a background on an element overlapping another element with background/image.
The fix for my case was simply adding a background-color to the element. Since the element is completely round I can simply make a border-radius as well, so the background will never appear.
If the element however was not a complete round circle, this would not be a workable fix.
I'm working on an animation using CreateJS and spritesheet, but I don't understand why that don't work with iPad.
That works fine with Chrome browser.
The CreateJS framework should work with iOS.
You can find my code here:
Link no more available
Do you have any idea?
Otherwise, do you have any other solution to create HTML5 animation for iPad from the web?
In addition, I need to add sound to this animation with synchronization with the animation, so the animation must not lag, I need perfect performances.
Thanks.
Sorry, my first answer was not helpful. I took a deeper look here, and the issue is probably because of the size of the PNG. Your PNG is currently 4096x2048, which is double the acceptable size for iOS.
Ensure your images are less than 2048x2048 - you can use Zoë to export them from Flash, which will give you multiple images.
http://createjs.com/zoe
Cheers.
I've recently stumbled upon the TurnJS plugin to create a page turning effect. I'm working on a project right now with it to recreate a Flash flipbook that was built in the past. One of the stipulations is that it has to be shrunk or magnified to fill the browser window without scrolling. I've been experimenting with my own simple JS utilizing browser transform properties to scale the container. The scaling is working however the flip book effects don't work very well once everything has been scaled (shaky page transitions and the page corners don't work very well).
I've also been experimenting with without much luck either.
I've also implemented a chart on the second page using Flot and have also noticed that when zoomed, the mouse over are not aligned correctly. It's similar to what's happening with the page corners.
The original flash version: http://www.return-it.ca/ar2010/index.html
Without zooming: http://dev.bitpowered.ca/encorp/
Have I gone about this the wrong way? Is there an alternative to getthing this all to work, or am I SOL on this one? Thanks in advance.
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've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.