Silverlight HTML 5 Canvas

New Post: IE9 CTP does not support

stimpy77 — Fri, 13 Aug 2010 21:17:17 GMT

Scratch this. They added support for it. Whew!

Source code checked in, #48968

_TFSSERVICE — Thu, 22 Jul 2010 18:55:41 GMT

Checked in by server upgrade

Commented Issue: data: URI support for drawImage [6773]

stimpy77 — Fri, 04 Jun 2010 07:46:02 GMT

When drawImage is called with a DOM Image that was loaded with a data: URI, the call fails because support for this scheme is not built in to the BitmapImage class. I've implemented a fix for this, but because I am not on Windows, I cannot run the CodePlex client. Basically, the following 2 methods can be added to the Utility class, and the 3 drawImage overloads can then call DomImageSource instead of instantiating BitmapImage directly. Hope this proves helpful for someone else!

<code>
public static BitmapSource DomImageSource(HtmlElement img)
{
Uri src = new Uri(HtmlPage.Document.DocumentUri, img.GetAttribute("src"));

if (src.Scheme == "data")
return BitmapSourceForDataUri(src);
else
return new BitmapImage(src);
}

public static BitmapSource BitmapSourceForDataUri(Uri dataUri)
{
string dataString = dataUri.OriginalString;

int b64Start = dataString.IndexOf(",");
if (b64Start == -1) return null;
string base64 = dataString.Substring(b64Start + 1);

Stream stream = new MemoryStream(Convert.FromBase64String(base64));
BitmapImage image = new BitmapImage();
image.SetSource(stream);
return image;
}
</code>
Comments: ** Comment from web user: stimpy77 **

Merged.

Source code checked in, #46625

stimpy77 — Fri, 04 Jun 2010 07:43:41 GMT

http://slcanvas.codeplex.com/workitem/6773

Patch Applied: #6060

stimpy77 — Fri, 04 Jun 2010 07:43:19 GMT

stimpy77 has applied patch #6060.

Comment:
http://slcanvas.codeplex.com/workitem/6773

Commented Issue: data: URI support for drawImage [6773]

stimpy77 — Thu, 03 Jun 2010 03:38:35 GMT

It was just a suggestion. You can upload patches here: http://slcanvas.codeplex.com/SourceControl/UploadPatch.aspx or by clicking on the Source Code tab and then clicking "Upload patch". However, I put it there already and someone (probably myself) will review your contribution soon.

Patch Uploaded: #6060

stimpy77 — Thu, 03 Jun 2010 03:35:36 GMT

stimpy77 has uploaded a patch.

Description:
Fix: When drawImage is called with a DOM Image that was loaded with a data: URI, the call fails because support for this scheme is not built in to the BitmapImage class.

Commented Issue: data: URI support for drawImage [6773]

corrado — Thu, 03 Jun 2010 02:04:35 GMT

Thanks for the tip on the SVN interface. That makes things much easier! Here's a patch for what I tried to explain above.

Commented Issue: data: URI support for drawImage [6773]

stimpy77 — Mon, 31 May 2010 22:44:07 GMT

Thanks. FYI, CodePlex has a Subversion interface (although you'd still have to be added as a contributor in order to check in), or you can produce patch files and upload them.

Created Issue: data: URI support for drawImage [6773]

corrado — Mon, 31 May 2010 06:19:03 GMT

When drawImage is called with a DOM Image that was loaded with a data: URI, the call fails because support for this scheme is not built in to the BitmapImage class. I've implemented a fix for this, but because I am not on Windows, I cannot run the CodePlex client. Basically, the following 2 methods can be added to the Utility class, and the 3 drawImage overloads can then call DomImageSource instead of instantiating BitmapImage directly. Hope this proves helpful for someone else!

public static BitmapSource DomImageSource(HtmlElement img)
{
Uri src = new Uri(HtmlPage.Document.DocumentUri, img.GetAttribute("src"));

if (src.Scheme == "data")
return BitmapSourceForDataUri(src);
else
return new BitmapImage(src);
}

public static BitmapSource BitmapSourceForDataUri(Uri dataUri)
{
string dataString = dataUri.OriginalString;

int b64Start = dataString.IndexOf(",");
if (b64Start == -1) return null;
string base64 = dataString.Substring(b64Start + 1);

Stream stream = new MemoryStream(Convert.FromBase64String(base64));
BitmapImage image = new BitmapImage();
image.SetSource(stream);
return image;
}

New Post: IE9 CTP does not support

stimpy77 — Fri, 19 Mar 2010 20:11:20 GMT

I downloaded the technology preview for IE9. Looks like despite the hopes and starving mouths of millions, IE9 will not support the <canvas> tag. It is looking like another partial standards refresh. Quite the bitter disappointment.

Source code checked in, #38220

stimpy77 — Sat, 13 Mar 2010 07:35:49 GMT

drop if

Source code checked in, #38219

stimpy77 — Sat, 13 Mar 2010 07:04:15 GMT

Add Trixie script - <canvas> tags are automatically converted when this script is added to the Trixie scripts folder

Source code checked in, #37771

stimpy77 — Sat, 06 Mar 2010 04:27:21 GMT

slcanvas.internetXapPath added (points to static file at http://silverlightcanvas.appspot.com)

Updated Wiki: Home

stimpy77 — Sat, 06 Mar 2010 02:47:38 GMT

Project Description
This project successfully uses Silverlight as a rendering engine to implement HTML 5 <canvas> support in IE6~IE8. It also enables onload=".." attribute support for native canvas renderers for 'this' context object activation.

For more information, visit
http://bit.ly/2BUyrW, http://bit.ly/vPEjy, and http://bit.ly/apkmQz

In-browser online demonstration: http://silverlightcanvas.appspot.com/

Static file reference for <script src="..">: http://silverlightcanvas.appspot.com/static/slcanvas.js

Updated Wiki: Home

stimpy77 — Sat, 06 Mar 2010 02:47:14 GMT

Project Description
This project successfully uses Silverlight as a rendering engine to implement HTML 5 <canvas> support in IE6~IE8. It also enables onload=".." attribute support for native canvas renderers for 'this' context object activation.

For more information, visit
http://bit.ly/2BUyrW, http://bit.ly/vPEjy, and http://bit.ly/apkmQz

In-browser online demonstration: http://silverlightcanvas.appspot.com/

Static file reference: http://silverlightcanvas.appspot.com/static/slcanvas.js

Updated Wiki: Home

stimpy77 — Sat, 06 Mar 2010 02:46:55 GMT

Project Description
This project successfully uses Silverlight as a rendering engine to implement HTML 5 <canvas> support in IE6~IE8. It also enables onload=".." attribute support for native canvas renderers for 'this' context object activation.

For more information, visit
http://bit.ly/2BUyrW, http://bit.ly/vPEjy, and http://bit.ly/apkmQz

In-browser online demonstration: http://bit.ly/bcNLgn

Static file reference: http://silverlightcanvas.appspot.com/static/slcanvas.js

Updated Wiki: Home

stimpy77 — Sat, 06 Mar 2010 02:43:18 GMT

Project Description
This project successfully uses Silverlight as a rendering engine to implement HTML 5 <canvas> support in IE6~IE8. It also enables onload=".." attribute support for native canvas renderers for 'this' context object activation.

For more information, visit
http://bit.ly/2BUyrW, http://bit.ly/vPEjy, and http://bit.ly/apkmQz

In-browser online demonstration: http://bit.ly/bUAhdV

Static file reference: http://silverlightcanvas.appspot.com/static/slcanvas.js

Updated Wiki: Documentation

stimpy77 — Fri, 26 Feb 2010 18:06:16 GMT

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

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)
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/

Commented Issue: Brushes need to be flattened to bitmap [6078]

infinte — Fri, 26 Feb 2010 10:07:36 GMT

Each time the canvas is written to with new vector art, the components of the vector artwork are retained and stack up. There should be Silverlight 3 detection such that if bitmap rasterization is supported on the currently running Silverlight runtime it be used to flatten out the stack.
Comments: ** Comment from web user: infinte **

I agree.
In my opionion, Flatten() method should be called by a timer-like mechamism, and, before some special methods, for example, GetPixel(x,y).

Silverlight HTML 5 Canvas

New Post: IE9 CTP does not support tag

Source code checked in, #48968

Commented Issue: data: URI support for drawImage [6773]

Source code checked in, #46625

Patch Applied: #6060

Commented Issue: data: URI support for drawImage [6773]

Patch Uploaded: #6060

Commented Issue: data: URI support for drawImage [6773]

Commented Issue: data: URI support for drawImage [6773]

Created Issue: data: URI support for drawImage [6773]

New Post: IE9 CTP does not support tag

Source code checked in, #38220

Source code checked in, #38219

Source code checked in, #37771

Updated Wiki: Home

Updated Wiki: Home

Updated Wiki: Home

Updated Wiki: Home

Updated Wiki: Documentation

Introduction

Getting Started

Getting past the renderMethod attribute requirement

API Implementation

Commented Issue: Brushes need to be flattened to bitmap [6078]

New Post: IE9 CTP does not support

New Post: IE9 CTP does not support