Results 1 - 20 of 36

WebGL tutorial

This tutorial describes how to use the <canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.
Tutorial WebGL

Advanced animations

We are going to use a ball for our animation studies, so let's first draw that ball onto the canvas. The following code will set us up.
Canvas Graphics Tutorial

Drawing text

The canvas rendering context provides two methods to render text:
Canvas Graphics Intermediate Tutorial


There are a variety of demos and further explanations about canvas on these sites:
Canvas Graphics Tutorial

Hit regions and accessibility

The content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at demonstrates how this can be done:
Canvas Graphics Tutorial

Pixel manipulation with canvas

The ImageData object represents the underlying pixel data of an area of a canvas object. It contains the following read-only attributes:
Canvas Graphics Intermediate Tutorial

Writing a WebSocket server in C#

If you would like to use the WebSocket API, it is useful if you have a server. In this article I will show you how to write one in C#. You can do it in any server-side language, but to keep things simple and more understandable, I chose Microsoft's language.
HTML5 NeedsMarkupWork Tutorial WebSockets

Basic usage of canvas

At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. Indeed, the <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
Canvas Graphics HTML Intermediate Tutorial

Using images

Importing images into a canvas is basically a two step process:
Advanced Canvas Graphics HTML Tutorial

A simple RTCDataChannel sample

The RTCDataChannel interface is a feature of the WebRTC API which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the WebSocket API, so that the same programming model can be used for each.
API Communication Example Tutorial WebRTC

Writing a WebSocket server in Java

This example shows you how to create a WebSocket API server using Oracle Java.

Although other server-side languages can be used to create a WebSocker server, this example uses Oracle Java to simplify the example code.
Handshaking HTML5 NeedsMarkupWork Tutorial WebSockets