HTML and CSS Reference
In-Depth Information
Listing 6-7 shows the framebuffer requests, which specify the position of the top left
corner of the area to update. They also contain the height and width of the region, which
allows clients to elect to update only a portion of the framebuffer. For this example, we
will always request updates across the entire canvas. The incremental byte indicates to
the server that the client has a copy of the current framebuffer and can apply updates.
That is more efficient than sending the entire contents of the screen over and over again.
Using HTML5 <canvas> to Draw a Framebuffer
Now that the client can accept framebuffer updates, let's render this information on the
client, which enables the client to view the GUI information coming from the RFB server
(or TightVNC in our case).
One of the most important new elements in HTML5 is <canvas> . The <canvas>
element supports a 2d drawing API that gives HTML5 applications the ability to
manipulate pixel graphics. Low-level drawing is required to efficiently display a
framebuffer in an application, because application code must be able to set each pixel
color individually.
Listing 6-8 creates a canvas element, sets its initial width and height, and gets a
drawing context.
Listing 6-8. Creating a Canvas Element
Screen = function(width, height) {
this.canvas = document.createElement("canvas");
this.canvas.setAttribute("height", height);
this.canvas.setAttribute("width", width);
this.context = this.canvas.getContext("2d");
The 2d drawing context provides the drawing API for interacting with the canvas
element. Many of the 2d context functions deal with drawing primitive shapes. Functions
such as fillRect are ideal for displaying most programmatically generated graphics. To
display a framebuffer, we need to use the lower level functions exposed by the canvas 2d
context. The putImageData() function is an ideal low-level pixel function, directly setting
the pixel values of a canvas from an array of color data. Listing 6-9 shows an example of
this function.
Listing 6-9. The putImageData() Function
context.putImageData(imageData, xPos, yPos);
Similarly, there is a getImageData() function that can retrieve pixel values from a
canvas context, as shown in Listing 6-10.
Listing 6-10. The a getImageData() Function
context.getImageData(xSrc, ySrc, width, height);
Search WWH ::

Custom Search