Canvas Renderer Example

http://openlayers.org/dev/examples/canvas.html Note: Map doesn't show up.

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
        <h1 id="title">Canvas Renderer Example</h1>
        <div id="tags">
            canvas, renderer, advanced,
        </div>
        <p id="shortdesc">
            Demonstrates the use of the canvas renderer with a vector layer.
        </p>
        <div id="map" class="smallmap"></div>
        <div id="docs">
            <p>
                This example shows a vector layer that uses the Canvas renderer
                where available. The order of the renderers given in the layer
                options is used to locate the first available renderer.
            </p>
            <p>
                See the <a href="canvas.js" target="_blank">canvas.js source</a>
                to see how this is done.
            </p> 
        </div>

  <br />
  <p>Note: Map doesn't show up. <a href="http://openlayers.org/dev/examples/canvas.html">Original
  OpenLayers Example</a>.</p>

JavaScript

(function($) {

    var map, layer, styleMap;
    OpenLayers.ProxyHost = 'proxy.cgi?url=';

    function init() {
        map = new OpenLayers.Map({
            div: 'map',
            projection: new OpenLayers.Projection('EPSG:900913'),
            displayProjection: new OpenLayers.Projection('EPSG:4326')
        });

        var g = new OpenLayers.Layer.Google('Google Layer', {
            sphericalMercator: true
        });
        map.addLayers([g]);

        // prepare to style the data
        styleMap = new OpenLayers.StyleMap({
            strokeColor: 'black',
            strokeWidth: 2,
            strokeOpacity: 0.5,
            fillOpacity: 0.2
        });

        // create a color table for state FIPS code
        var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
        var code, fips = {};
        for (var i = 1; i <= 66; ++i) {
            code = '0' + i;
            code = code.substring(code.length - 2);
            fips[code] = {
                fillColor: colors[i % colors.length]
            };
        }
        // add unique value rules with your color lookup
        styleMap.addUniqueValueRules('default', 'STATE_FIPS', fips);

        // create a vector layer using the canvas renderer (where available)
        var wfs = new OpenLayers.Layer.Vector('States', {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: new OpenLayers.Protocol.WFS({
                version: '1.1.0',
                srsName: 'EPSG:900913',
                url: 'http://v2.suite.opengeo.org/geoserver/wfs',
                featureType: 'states',
                featureNS: 'http://usa.opengeo.org'
            }),
            styleMap: styleMap,
            renderers: ['Canvas', 'SVG', 'VML']
        });
        map.addLayer(wfs);

        // if you want to use Geographic coords, transform to ESPG:900913
        var ddBounds = new OpenLayers.Bounds(-73.839111, 40.287907, -68.214111, 44.441624);
        map.zoomToExtent(
    ...