I would like to use element canvas of HTML 5 in OpenLayers to render maps.

I am searching some code or reference in which I can check it, can you help me in this?

2 Answers 2


You can have a look at this OpenLayers example. Below is the highlight of line from the code with mention the renderers.

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"]

renderers: ["Canvas", "SVG", "VML"]

renderers array contains a list of renderers used by OpenLayers in the given order. So here first OpenLayers check for Canvas and if your browser doesnt supports HTML5Canvas, it switches to the next one in the row, SVG and if fails again it goes for VML (IE only i guess)

You can see the API doc of renderer class here. But its not very helpful. There is a nice report on different HTML5 renderers usage and performance analysis done by someone available in the trac wiki. Thanks for the work

  • Hi @rashad, thanks for your reply. But if you see than in demo they have used div element to render map. Can you explain it further please if possible? Commented Sep 19, 2013 at 8:44
  • OK. OpenLayers does manages everything inside div. layermager, layers, controls. Each layer (wms/vector comes as a seperate divs. mapcontainer(another div).from w3cschool - The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). please accept the answer if its acceptable.
    – rkm
    Commented Sep 19, 2013 at 9:23
  • Hi Rashad, if this is true than I am ready to accept your answer, why I am double confirming because we need a concrete answer before moving ahead. Commented Sep 19, 2013 at 11:10

If you used OpenLayers 3, the following link can help you: http://openlayers.org/en/v3.0.0/examples/export-map.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.