title: ASP.NET Drawing Application using HTML5 Canvas. Save to Server. JavaScript Error
body: <p>I have pulled together a simple ASP.NET drawing application using HTML5 Canvas.  I have also written some code that uploads a PNG image of the Canvas to the server.  My code is as follows:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CanvasToServer._Default" %&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head id="Head1" runat="server"&gt;
      &lt;title&gt;iScribble Canvas To Server&lt;/title&gt;
  
      &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
  
      &lt;!--Load Draw application code--&gt;
      &lt;script type="text/javascript" src="JScript.js"&gt;&lt;/script&gt;
  
      &lt;!--CSS--&gt;
      &lt;style type="text/css"&gt;
          html, body
          {
              font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif;
          }
          #graph
          {
              border: 1px solid #000;
          }
          #controls
          {
              font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif;
              font-weight: bold;
              font-size: smaller;
              padding: 3px;
              width: 594px;
              height: 25px;
          }
          select
          {
              font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif;
              font-size: medium;
          }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
          // Send the canvas image to the server.
          $(function () {
              $("#btnSend").click(function () {
                  var image = graph[0].toDataURL("image/png");
                  image = image.replace('data:image/png;base64,', '');
  
                  $.ajax({
                      type: 'POST',
                      url: 'Default.aspx/UploadImage',
                      data: '{ "imageData" : "' + image + '" }',
                      contentType: 'application/json; charset=utf-8',
                      dataType: 'json',
                      success: function (msg) {
                          alert('Image sent!');
                      }
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
  
      &lt;div id="controls"&gt;
          Size:
          &lt;select id="thickness" class="fixed"&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;option value="4"&gt;4&lt;/option&gt;
              &lt;option value="5"&gt;5&lt;/option&gt;
              &lt;option value="10"&gt;10&lt;/option&gt;
              &lt;option value="20"&gt;20&lt;/option&gt;
          &lt;/select&gt;
          Color:
          &lt;select id="color"&gt;
              &lt;option value="#FFFFFF"&gt;#FFFFFF&lt;/option&gt;
              &lt;option value="#AAAAAA"&gt;#AAAAAA&lt;/option&gt;
              &lt;option value="#666666"&gt;#666666&lt;/option&gt;
              &lt;option value="#000000"&gt;#000000&lt;/option&gt;
              &lt;option value="#9BA16C"&gt;#9BA16C&lt;/option&gt;
              &lt;option value="#CC8F2B"&gt;#CC8F2B&lt;/option&gt;
              &lt;option value="#63631D"&gt;#63631D&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;canvas id="graph" width="200" height="150"&gt;&lt;/canvas&gt;
  
      &lt;input id="btnSend" type="button" value="Send To Server" /&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code behind is:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Web.Services;
  using System.IO;
  using System.Web.Script.Services;
  
  namespace CanvasToServer
  {
      [ScriptService]
      public partial class _Default : System.Web.UI.Page
      {
          [WebMethod()]
          public static void UploadImage(string imageData)
          {
              FileStream fs = new FileStream("C:\\image.png", FileMode.Create);
              BinaryWriter bw = new BinaryWriter(fs);
  
              byte[] data = Convert.FromBase64String(imageData);
  
              bw.Write(data);
              bw.Close();
          }
      }
  }
  </code></pre>
  
  <p>The drawing part of the application works fine.</p>
  
  <p>The problem arises when I click on the button 'Send To Server' I get the JavaScript Error:</p>
  
  <p>'graph is not defined'</p>
  
  <p>on the line:</p>
  
  <pre><code>var image = graph[0].toDataURL("image/png");
  </code></pre>
  
  <p>Can anyone help me resolve this issue please.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Walter</p>