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

About WebSocket About HTML5 WebSocket The HTML5 WebSockets specification defines an API that enables web pages to use the WebSockets protocol for two-way communication with a remote host. It introduces the WebSocket interface and defines a full-duplex communication channel that operates through a single socket over the Web. HTML5 WebSockets provide an enormous reduction in unnecessary network traffic and latency compared to the unscalable polling and long-polling solutions that were used to simulate a full-duplex connection by maintaining two connections. HTML5 WebSockets account for network hazards such as proxies and firewalls, making streaming possible over any connection, and with the ability to support upstream and downstream communications over a single connection, HTML5 WebSockets-based applications place less burden on servers, allowing existing machines to support more concurrent connections. The WebSocket Protocol GET Using the HTML5 WebSocket API

Impact - HTML5 Canvas & JavaScript Game Engine Create a Drawing App with HTML5 Canvas and JavaScript { William Malone } by William Malone This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn: How to draw dynamically on HTML5 canvas The future possiblities of HTML5 canvas The current browser compatibility of HTML5 canvas Each step includes a working demo; if you want to skip ahead: Define Our Objective Let's create a web app where the user can dynamically draw on an HTML5 canvas. Our tools could use colors (except maybe our eraser). Similarly let's also give our user 4 different sizes to draw with, because we can. 3 tools: crayon, marker, eraser 4 colors to choose from (except eraser) 4 sizes to choose from Like a coloring book, let's give our user something to "color". Prepare HTML5 Canvas: Markup We only need a line of markup; everything else will be in scripting. Wait... Prepare HTML5 Canvas: Scripting Give it a try: Updates

Start Using HTML5 WebSockets Today One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we'll review the process of running a WebSocket server in PHP, and then building a client to send and receive messages to it over the WebSocket protocol. What are WebSockets? WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. What do WebSockets Replace? Websockets can replace long-polling. Many Ajax applications makes use of the above – this can often be attributed to poor resource utilization. Wouldn't it be great if the server could wake up one morning and send its data to clients who are willing to listen without some sort of pre established connection? Step 1: Get the WebSocket Server This tutorial will focus more on the client building rather than server implementation. I'm using XAMPP on Windows 7 to run the PHP server locally. Start the Apache server Step 2: Change URLs and Ports Step 4: Add Some CSS

math - Algorithm to detect intersection of two rectangles Introducing WebSocket: Bringing Sockets to the Web The Problem: Low Latency Client-Server and Server-Client Connections The web has been largely built around the so-called request/response paradigm of HTTP. A client loads up a web page and then nothing happens until the user clicks onto the next page. Around 2005, AJAX started to make the web feel more dynamic. However, all of these work-arounds share one problem: They carry the overhead of HTTP, which doesn't make them well suited for low latency applications. Introducing WebSocket: Bringing Sockets to the Web The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. Getting Started You open up a WebSocket connection simply by calling the WebSocket constructor: var connection = new WebSocket(' ['soap', 'xmpp']); Notice the ws:. Attaching some event handlers immediately to the connection allows you to know when the connection is opened, received incoming messages, or there is an error. Proxy Servers

Lock 'n' Chase Lock 'n' Chase is a 1981 maze arcade game developed and published by Data East in Japan in 1981, and was later published in North America by Taito. The game was later licensed to Mattel who produced the Intellivision and Atari 2600 home console versions in 1982 [1][2] and an Apple II version in January 1983.[3] Telegames later re-published the game for the Atari 2600 after acquiring rights from Mattel. Data East released a Nintendo Game Boy version of the game in July 1990. [4][dead link] Lock 'n' Chase was Data East's response to Pac-Man. Gameplay[edit] The game's main character is a thief. The object of the game is to enter a maze and collect all the coins and, if possible, any other treasure that may appear. The original Lock 'n' Chase began to appear at home in 2010, included in the Nintendo Wii release Data East Arcade Classics and a release on the PlayStation Network. References[edit] External links[edit]

Guía de HTML5 en PDF aprende desde cero el nuevo lenguaje de la web En nuestro recorrido por Latinoamérica compartiendo historias y tendencias de HTML5 empezamos a redactar esta guía para nuestros alumnos. Con HTML5 se está construyendo la web moderna. Vídeo, audio, geolocalización, nuevos componentes y etiquetas que son la base del gran cambio de internet en esta época. Con la guía tomarás las bases para iniciar y crear sitios y aplicaciones en HTML5 para PCs y teléfonos móviles. Funcionales en PC, Mac, iPhone, Androids e iPads. La guía está en producción permanente. The Great HTML5 Mobile Gaming Performance Comparison Update 11th June 2012: added score for Playbook OS 2.1. It's literally 3x faster than OS 2.0, so the conclusion for Playbook has changed from "unusable" to "great"! Much has been said about the performance of HTML5 games on mobile, often around the fact it's too slow to be practical. This week we measured the performance of 23 combinations of browser and device with a real-world game test made using Construct 2, our HTML5 canvas based game creator. We've spent some time optimising our engine for best performance, and results are promising: despite the naysayers, it looks like HTML5 mobile gaming is a genuinely viable option already - and it is likely to improve further. The test is an automated version of Space Blaster, our stock demo game for Construct 2. To run the test just visit the performance test URL and watch it go. Another thing essential for HTML5 mobile gaming is multitouch support. So now on to the results. The Test Results Review Windows Phone 7 comes in a sore last.

Geolocation You are here: Home Dive Into HTML5 Diving In Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. Ask Professor Markup Q: Geolocation sounds scary. The Geolocation API The geolocation API lets you share your location with trusted web sites. As you can see from the following table, the geolocation API is supported by most browsers on the desktop and mobile devices. Along with support for the standard geolocation API, there are a plethora of device-specific APIs on other mobile platforms. Show Me The Code The geolocation API centers around a new property on the global navigator object: navigator.geolocation. function get_location() { (show_map); } Choices! <!

How to Build a Game with HTML5 HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed...even in the gaming world! Today, you'll make your first game using Box2D and HTML5's canvas tag. What is Box2D? Box2D is an open source and popular engine that simulates 2D physics for making games and applications. With the same methods and objects, you have the ability to make your games' physics in many languages, such as Objective C (iPhone/iPad), Actionscript 3.0 (Web), HTML 5 (Web), etc. Step 1 - Setting up your Project To begin developing your demo, download the Box2D engine for HTML5 here. Now, you must insert the necessary files to run box2D into your HTML file: Yep, that's a huge number of HTTP requests! Please note that, for deployment, it's highly recommended that you concatenate all of these resources into one script file. Next, create two more scripts inside the /js/ folder, called "box2dutils.js" and "game.js". Step 2 - Developing the Game Back to game.js

Onswipe Makes Any News Site Touch-Enabled With HTML5 Magic | Epicenter  Look out specialized magazine iPad apps — you’ve got a new competitor that aims to turn any website into a touch-and-swipe experience on tablets and smartphones with just a few lines of JavaScript. Onswipe, which launched Tuesday, works by diverting iPad, iPhone and Android phone users from a publisher’s webpage to a specialized HTML5-driven page that behaves like a custom magazine app such as Popular Science and Wired magazine’s iPad apps or The Daily’s experiment of an app as a daily newspaper. The difference is that Onswipe does all the work – for free. Publishers choose from a range of templates; provide a way for Onswipe to get at the content in the publisher’s database; and include a short line of code in their website. And voila! Sites get instant appification — with magazine-like ads between stories. Onswipe Demo Video from Onswipe on Vimeo. “The tablet is the TV of our generation,” Baptiste said. Others have gone down the road of bypassing native apps for the power of HTML5.

HTML5 Games: Optimizing Your Game Loop ← 26 New Books and Videos Added to Safari Books Online | HTML5 Games: Fixing Our Demo → This post will give you some techniques for optimizing your game loop using browser profiling tools, thus improving the performance of your game. The various profiling tools available for the most popular browsers will be discussed, along with a description of how to effectively identify bottlenecks in performance and interpret the results. As with any realtime application, what is most important is the ability of your central loop (the game loop) to run in a timely manner. The Tools A good CPU profiler is essential in optimizing your game loop. Fortunately, in-browser consoles and JavaScript debuggers have come a long way since the early days, and modern browsers offer some excellent profiling tools in their suite of dev tools. Of course, there are 3rd-party JavaScript profiling tools out there (one of the better tools I would recommend is dynaTrace AJAX edition). The unoptimized loop The markup: Firefox

Related: