DrawingAttributes Object

var agCtrl;
var inkPresenter; // Corresponds to InkPresenter element in xaml
var newStroke = null; // The Stroke variable we'll use here in mouse handlers
// DrawingAttributes variables
var daWidth = 2;
var daHeight = 2;
var daColor = "Black";
var daOutlineColor = "Black";

function root_Loaded(sender, args) 
{
    // Get the html object which contains the Silverlight plug-in
    agCtrl = sender.GetHost();
    inkPresenter = sender.findname("inkPresenterElement");
}

// Capture mouse movement when the left button is pressed and create the stroke
function InkPresenterMouseDown(sender,args)
{
   inkPresenter.CaptureMouse();
   
   newStroke = agCtrl.content.createFromXaml('<Stroke/>');
   
   var da = agCtrl.content.CreateFromXaml('<DrawingAttributes/>');
   newStroke.DrawingAttributes = da;
   
   // Set the drawing attributes properties
   newStroke.DrawingAttributes.Width = daWidth;
   newStroke.DrawingAttributes.Height = daHeight;
   newStroke.DrawingAttributes.Color = daColor;
   newStroke.DrawingAttributes.OutlineColor = daOutlineColor;
   
   newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
   inkPresenter.Strokes.Add(newStroke);
}

// Add the new points to the Stroke we're working with
function InkPresenterMouseMove(sender,args)
{
   if (newStroke != null)
   {
      newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
   }
}

// Release the mouse
function InkPresenterMouseUp(sender,args)
{
   newStroke = null;
   inkPresenter.ReleaseMouseCapture();
}

// Set the Drawing Attributes for a pen
function SelectPen(sender, args)
{
  daWidth = 1;
  daHeight = 1;
  daColor = "Black";
  daOutlineColor = "Black";
}

// Set the Drawing Attributes for a marker
function SelectMarker(sender, args)
{
  daWidth = 10;
  daHeight = 4;
  daColor = "Blue";
  daOutlineColor = "Blue";
}

// Set the Drawing Attributes for a highlighter
function SelectHighlighter(sender, args)
{
  daWidth = 25;
  daHeight = 5;
  daColor = "Yellow";
  daOutlineColor = "Yellow";
}

// Erase all strokes from the canvas
function EraseCanvas(sender, args)
{
  inkPresenter.Strokes.Clear();
}

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="root_Loaded"
        x:Name="root"
        Width="600" Height="400">	
  <InkPresenter
 		x:Name="inkPresenterElement" 
		Background="transparent" 
		Width="600" Height="400" 
		MouseLeftButtonDown="InkPresenterMouseDown" 
		MouseMove="InkPresenterMouseMove" 
		MouseLeftButtonUp="InkPresenterMouseUp"/>

<!-- Pen Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="40" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="71"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Select Pen</TextBlock>

	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="40" 
	  x:Name="selectPen" MouseLeftButtonDown="SelectPen" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
<!-- Marker Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="170" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="191"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Select Marker</TextBlock>

	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="170" 
	  x:Name="selectMarker" MouseLeftButtonDown="SelectMarker" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
<!-- Highlighter Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="300" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="310"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Select Highlighter</TextBlock>

	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="300" 
	  x:Name="selectHighlighter" MouseLeftButtonDown="SelectHighlighter" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
<!-- Erase Canvas Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="430" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="463"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Erase All</TextBlock>

	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="430" 
	  x:Name="eraseCanvas" MouseLeftButtonDown="EraseCanvas" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
</Canvas>