background preloader

Improving HTML5 Canvas Performance

Improving HTML5 Canvas Performance
Introduction HTML5 canvas, which started as an experiment from Apple, is the most widely supported standard for 2D immediate mode graphics on the web. Many developers now rely on it for a wide variety of multimedia projects, visualizations, and games. However, as the applications we build increase in complexity, developers inadvertently hit the performance wall. There’s a lot of disconnected wisdom about optimizing canvas performance. This article aims to consolidate some of this body into a more readily digestible resource for developers. Note that this article does not go into usage of HTML5 canvas. Performance testing To address the quickly changing world of HTML5 canvas, JSPerf (jsperf.com) tests verify that every proposed optimization still works. Visitors to a JSPerf performance test page can run the test on their browser, and let JSPerf store the normalized test results on Browserscope (browserscope.org). Pre-render to an off-screen canvas no pre-rendering: pre-rendering: Conclusion

http://www.html5rocks.com/en/tutorials/canvas/performance/

Related:  Canvas

Canvas You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. Fast html5 canvas on iPhone/mobile safari — Jonas Wagner's Blog I finally found a way to optimize 2d canvas drawing on the iPhone 4. Because of the retina display the canvas seems to be rescaled in a slow way (in software?). So even though the rendering itself is relatively fast, the end result is slow. Setting the Viewport The first step is to set the viewport scale to 0.5 which will result in having one pixel per css pixel. So now the rendering is fast, but the picture is tiny.

Creating an HTML5 canvas painting application By Mihai Sucan Table of contents Introduction My previous HTML5 canvas tutorial provided you with insight into the numerous use cases for canvas in web applications. Optimize HTML5 canvas rendering with layering Introduction Often, in 2D games or when rendering HTML5 canvas, optimization is performed so multiple layers are used to build a composite scene. In low-level rendering such as OpenGL or WebGL, rendering is performed by clearing and drawing to a scene every frame. After implementation, games require optimization to cut down on the amount of rendering, at various costs. Because the canvas is a DOM element, it gives you the capability to layer multiple canvases as a method of optimization. In this article, explore the rationale for layering a canvas.

HTML5 Canvas for mobile apps « Geo-Mobile Blog Recently I’ve been getting up to speed with HTML5 Canvas. Along with other HTML5 technologies ( i.e. geolocation, database) I can see real potential for developing interactive mapping applications using just HTML5 and Javascript technologies. I’ve already done some experiments that attempt to simulate feature control using Canvas. (An effort inspired by the pixastic project.) I was very excited then to discover support for HTML5 Canvas has been growing for mobile browsers as well as desktop browsers.

HTML5 Canvas Drawing Lines with Smooth Edges In the previous post we kicked off with our painting application using HTML5 canvas. If you remember well, we ended up with a basic app where one can easily draw lines or something else with a “pencil” tool. But there was a problem. When drawing different shapes like circles, the lines/curves had jagged edges. They were not smooth or anti-aliased, whatever you want to call them. This article will aim towards solving those issues. HTML5 Canvas: You don’t always have to clear the entire thing When I first started working with the HTML5 canvas element, the one thing I found a bit frustrating was the fact that you had to clear the canvas and then redraw it. Coming from Flash, I wasn’t used to this because it’s one of the many things Flash does for you. With canvas, if you’re doing something like moving a space ship around in a game and you don’t clear it before you draw the ship’s new position, eventually you’ll just end up with canvas full of ships. So, we call clearRect and clear the canvas before we draw the ship’s new position and then it looks like the ship is moving around, when it’s really just being redrawn in it’s new position.

Parse XML with jQuery I recently ran through the technique of parsing JSON with jQuery and thought i’d pick this up and show you how to parse XML. It’s pretty much the same although the big difference with using XML is that this won’t work for xml files that don’t sit outside of your domain as we’re making a standard AJAX request and you can’t make cross domain ajax request unless you’re using JSONP, more of which can be found here. The XML Here’s our XML code, and for the purpose of the demo i’ve saved it as books.xml. You can see that we have an XML node called ‘book’ these help to structure the xml file elements. You will see that each book has a title, description and date.

Saving Canvas Data as an Image Over the past few months, we have talked quite a bit about HTML5, more specifically canvases. There are plenty of other interesting HTML5 subjects canvases offer, which makes it by far the most fascinating and flexible object. We have covered topics ranging from simple rotations to photo filters. Today we are going to go over how to take your canvas and save it as an image. Partial image manipulation with canvas and webworkers In my previous article I showed how to use box2d-web and deviceorientation to rol around a set of circles using standard HTML5 APIs. My initial goal of that article was to load in an image, translate it to a series of seperate circles, and let you play around with that. But that's for later. For now I'll show you how you can use canvas together with web workers to offload heavy computing functions to a background thread. For this example we'll take an input image and manipulate the image in blocks of 10x10 pixels.

Reading XML with jQuery - Think2Loud The first step is making sure you have jQuery included on your page. Second, you should check the XML file you are going to read and make sure it’s free of errors. If you are unfamiliar with XML synatax, check out the W3School’s rules on XML syntax. The file I’m using for this example is just a listing of some Web sites I enjoy. Finally, you just need to tell jQuery to read the file and print out the contents. A Gentle Introduction to Making HTML5 Canvas Interactive I wrote a book on HTML5, including three chapters on Canvas! Buy it here. This is a big overhaul of one of my tutorials on making and moving shapes on an HTML5 Canvas.

《jQuery移动开发》(jQuery Mobile)英文文字版/更新EPUB版本/更新MOBI版本/更新源代码[PDF 简介: 内容介绍: The future belongs to mobile web apps that function on a broad range of smartphones and tablets. Get started with jQuery Mobile, the touch-optimized web framework for creating apps that look and behave consistently across many devices. This concise book provides HTML5, CSS3, and JavaScript code examples, screen shots, and step-by-step guidance to help you build a complete working app with jQuery Mobile. jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。

Related: