Introduction

Thank you for taking a look at the Silverlight HTML 5 Canvas renderer. This solution enables HTML 5 canvas support within browsers that do not natively support HTML 5 canvas, such as Microsoft Internet Explorer 6. It also adds a few features to the <canvas> tag that are useful to browsers that natively support HTML 5 canvas, such as onload=".." attribute support which gives runtime support to the 'this' object context, which is not necessary but makes it easier to work with scripting with HTML 5 canvas as one does not have to execute document.getElementById(). It also helps to reenforce a standard approach to solving the problem of page lifetime awareness, so that the script does not invoke upon the canvas DOM element until the element is ready.

Getting Started

To use this solution, you need to download it (see the Downloads tab), extract it, and put the slcanvas.js file and ClientBin directory into the file structure of your web site. You must then add the Javascript to your web page:

<script language="Javascript" type="text/javascript" src="slcanvas.js"></script>

Note that slcanvas.js adds path information to ./ClientBin/SLCanvas.xap, so you may need to update this path according to your needs.

Also note that slcanvas.js relies on the window.load event, so if you need to use window.load for other purposes, be sure to write your code this way:

var _wl = window.load;
window.load = function() {
    if (_wl) _wl.call();
    // add your window.load handling here
};

Finally, your <canvas> tag needs to look like this:

<canvas id="myCanvas" width="200" height="200" renderMethod="auto" onload="runme.call(this, this)"></canvas>

.. where the onload=".." attribute consists of a reference to your canvas code. Using functionname.call(this, this) will provide the canvas element as the this context for the function execution, while also passing in the canvas element as a function parameter.

Note: The onload=".." attribute is not currently supported by any browser for <canvas> tags outside of slcanvas.js. If any browser should be updated to enable support for onload=".." on a <canvas> tag natively and renderMethod=".." is declared, the attribute value may be executed twice, once natively and once by slcanvas.js, so you may want to include execution tracking such as

<canvas onload="myCanvas_onload.call(this, this)" renderMethod="auto"></canvas>
<script type="text/javascript">
function myCanvas_onload(canvas) {
    if (window['myCanvas_onload_handled']) return;
    window['myCanvas_onload_handled'] = true;
    // .. add your normal canvas code here
}
</script>


The valid values for the renderMethod attribute are:
  • auto - This will allow slcanvas.js to determine whether the browser already supports the HTML 5 canvas functionality, and if so it leaves the canvas element alone except to execute its onload=".." attribute.
  • native - This value will not attempt to add Silverlight as a renderer if the browser does not already support HTML 5 canvas functionality. It will still execute the onload=".." attribute, but only if the browser natively supports HTML 5 canvas.
  • Silverlight - This value will replace the canvas tag with the Silverlight renderer outright so that Silverlight is used whether the browser supports HTML 5 canvas or not. (The actual <canvas> element is retained in the DOM only if the browser does not support its 2D context.)

Getting past the renderMethod attribute requirement

Some people might not want to explicitly declare renderMethod="auto" on the <canvas> tags and just want the <canvas> markup to look exactly the same as without the Silverlight bridge, using only standard WHATG attributes. Scenarios might include such conversations as, "I like my HTML 5 canvas application, but I'd like to support IE6. Can I enable that without mucking up my <canvas> tag markup?" To do that, you must
  1. Not attempt to access 2D contexts until the very end of window.load's life cycle so that slcanvas.js has a chance to run (see notes on window.load above)
  2. Use the following in the <head> tag to replace the slcanvas.js script declaration:

If using trunk (upcoming release):
<script type="text/javascript" language="javascript">window['defaultCanvasRenderMethodToAuto'] = true;</script>
<script type="text/javascript" language="javascript" src="slcanvas.js"></script>

If using the v1.1 (current) release:
<script type="text/javascript" language="javascript">
var _canv_wl = window.onload;
window.onload = function() {
    if (_canv_wl) _canv_wl.call();
    var canvasTags = document.getElementsByTagName('canvas');
    for (var i = 0; i < canvasTags.length; i++) {
        var canvasTag = canvasTags[i];
        var renderMethodAttrib = canvasTag.getAttribute('renderMethod');
        if (!renderMethodAttrib || renderMethodAttrib == '') {
            canvasTag.setAttribute('renderMethod', 'auto');
        }
    }
};
</script>
<script type="text/javascript" language="javascript" src="slcanvas.js"></script> 

API Implementation

The Silverlight HTML 5 renderer project aims to be 100% compatible with HTML 5's canvas. These aims are not necessarily met, however, as there are several features still not yet implemented, particularly text-rendering and pixel-editing support. For further reading, you are strongly encouraged to read the original blog article that explains the original implementation of the bridge.

http://blogs.msdn.com/delay/archive/2009/08/24/using-one-platform-to-build-another-html-5-s-canvas-tag-implemented-using-silverlight.aspx

.. with a small follow-up at:

http://blogs.msdn.com/delay/archive/2009/08/26/following-up-on-some-of-the-attention-live-sample-posted-and-a-very-small-tweak-to-the-html5canvas-source-code.aspx

The actual specification for HTML 5 canvas has not been finalized. Here are the primary resources:

WHATG Draft Specification: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
Canvas reference at Apple: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html
Canvas tutorial at Opera: http://dev.opera.com/articles/view/html-5-canvas-the-basics/
Mozilla canvas reference: https://developer.mozilla.org/en/Canvas_tutorial

Additional canvas demos (not supported at all by Silverlight HTML 5 Canvas and best viewed in Google Chrome) are at

http://www.chromeexperiments.com/

Last edited Feb 26, 2010 at 6:06 PM by stimpy77, version 29

Comments

No comments yet.