The great thing about hosting Silverlight plugins on your web page is that you can load it with any XAML (not just the popular use of video as I've shown in my recent posts). For example, you can start drawing on this grid...

...and this is made possible due to the powerful XAML InkPresenter element. By adding this markup/code to a web page (provided that the silverlight.js file is referenced like before, see my earlier post on that)...

<script id="inkXaml" type="text/xaml"><?xml version="1.0"?>
    <Canvas xmlns="http://schemas.microsoft.com/client/2007"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Loaded="onXamlLoaded">
        <Image Source="images/gridpaper.png" Width="300" Height="221"/>
        <InkPresenter x:Name="inkPresenter"
         Background="transparent" Width="300" Height="221"
         MouseLeftButtonDown="onInkPresenterMouseDown"
         MouseMove="onInkPresenterMouseMove"
         MouseLeftButtonUp="onInkPresenterMouseUp"/>
    </Canvas>
</script>
<div id="inkHost" style="width: 300px; height: 221px">
<script type=text/javascript>

    Silverlight.createObjectEx({
        source: "#inkXaml",
        parentElement: document.getElementById("inkHost"),
        id: "inkPlugin",
        properties: {
            width: "100%",
            height: "100%",
            version: "1.0",
            inplaceInstallPrompt:true,
            background: "white",
            isWindowless: false
        },
        events: {}
    });

    var plugin;
    var inkPresenter;
    var stroke = null;

    function onXamlLoaded(sender, args)
    {
         plugin = document.getElementById("inkPlugin");
         inkPresenter = sender.findname("inkPresenter");
    }

    function onInkPresenterMouseDown(sender, eventArgs)
    {
        inkPresenter.CaptureMouse();
        stroke = plugin.content.createFromXaml("<Stroke/>");
        stroke.StylusPoints.AddStylusPoints(
            eventArgs.GetStylusPoints(inkPresenter));
        stroke.DrawingAttributes.Color = "#FF000DDD";
        stroke.DrawingAttributes.Width = 1;
        stroke.DrawingAttributes.Height = 1;
        inkPresenter.Strokes.Add(stroke);
    }

    function onInkPresenterMouseMove(sender, eventArgs)
    {
        if(stroke != null)
           stroke.StylusPoints.AddStylusPoints(eventArgs.GetStylusPoints(inkPresenter));
    }

    function onInkPresenterMouseUp(sender, eventArgs)
    {
       stroke = null;
    }
</script>
</div>

...you have made it possibility for your users to make handwritten notes on your page. The XAML is fairly simple with the background (grid) behind the InkPresenter, and the scripts are used to create new Stroke elements for each mouse gesture (down, moves, up).

There are many things you can do with this, and for a more extensive sample, check out the Silverlight Ink SDK Sample. For example, as the ink (strokes) is basically XAML, it's definitely possible to save in on the server side (why not in a database). As the strokes are created on the client, this would require some functionality to upload the ink, probably implemented using scripts that communicate with the web server (a.k.a. AJAX). This means that you could create everything from a simple inking guestbook to capturing ink feedback on a CAD drawing (note that the grid above is an image file). I haven't seen much of this in real-world applications yet, but there is a sample called Journal Note Converter Sample which allows you to convert a Microsoft Journal note to a complete Silverlight application that allow further inking.