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.
Related
I read an article saying it is best to use img control on mobile rather than use the canvas control.
Is this true as i cannot tell any differences.
You'll have to test on your own device with your own code.
In general canvas is programmatically intensive and therefore will be slower on devices (like mobile) that are less-powerful.
In addition, desktop devices always (almost always) have a GPU which the native canvas element will use to speed its calculations and display.
In my own experience, computationally intensive canvas apps are slower (often much slower) on mobile than desktop.
If your design allows you to use a static image instead of a canvas on mobile, then use the static image.
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 creating html5 & css3 web application now and on.
I'm using Google Chrome for testing platform.
and using css transform3d properties to implementation 3d camera & 3d world in web browser.
not WebGL. (because WebGL can't render HTML Elements directly.)
if it has many divisions(div elements) to draw, chrome can't draw all.
background images & some divisions are lost.
so it turns into white screen.
how can i solve this problem?
I think it is chrome's hardware acceleration bug.
How can i pass through?
Background images do cause issues and flickering when using 3d transform.
Move the image background in one container on which you don't want to apply 3d transforms and then try. Also make sure you have -webkit-backface-visibility: hidden;
Refer this link for more info: Prevent flicker on webkit-transition of webkit-transform
If I wanted to make a simulated boids experiment in either of the technologies, what limitations would I be under.
For example I have a boids simulation working in canvas with 100,000 particles but I am unable to work with a million as the browser crashes. This may be possible in WebGL with hardware acceleration.
So what limitations do these 2 technologies have with complex scenes?
The limitations of the graphics card apply to WebGL as well of course, there is little a browser can do to compensate those. For example, I noticed that WebGL samples with the texture size 4000x4000 don't work with my (on-board) graphics chip. Animating a large number of objects will likely overburden low-end graphics cards as well.
I want to use a 3d sort of simple animation like throwing a 3d football on a certain surface but I also want it to support webworks that uses webkit, and I think webkit doesn't support 3D webGL. So what should I do?
I have the option of an animated GIF or I need to use a sprite of 3D images and use that, or is there any framework that can help me to achieve that?
Whether I use an animated GIF or 3D image sprite, will I need to make a sprite of the canvas or just of one object and what is the best way to use such a sprite?