canvas cross domain pixel error - image

Question

I'm having this issue with the html5 canvas. I'm using EaselJS to load in images.
http://www.createjs.com/Docs/EaselJS/Bitmap.html
But when I add any kind of mouse events (onClick, onMouseOver, onMouseOut) on a parentcontainer of the image, from the moment i move my mouse, EaselJS spams this error:
uncaught exception: An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
It's running on an IIS server and the image I get is from an other domain.
I can get it working in Chrome by using --disable-web-security. But I'd rather avoid that.
I have read something about a proxy script might help fix this, but I don't know exactly how I could implement that here.
Any suggestions for a fix?
EDIT:
Resolved!
I resolved this by using a simple asp.net proxy script
http://www.sharepointjohn.com/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/
I started from this and with some help of colleagues it came to this .ashx file:
<%# WebHandler Language="C#" Class="getSharepointImage" %>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;
using System.Drawing;
public class getSharepointImage : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string proxyURL = string.Empty;
try
{
proxyURL = HttpUtility.UrlDecode(context.Request.QueryString["u"].ToString());
}
catch { }
if (proxyURL != string.Empty)
{
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(proxyURL);
//request.Credentials = new NetworkCredential("username", "password"); //needed if you wish to access something like sharepoint
request.Method = "GET";
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
if (response.StatusCode.ToString().ToLower() == "ok")
{
string contentType = "img/png";
Stream content = response.GetResponseStream();
StreamReader contentReader = new StreamReader(content);
context.Response.ContentType = contentType;
var outStream = context.Response.OutputStream;
Bitmap myImage = new Bitmap(System.Drawing.Image.FromStream(response.GetResponseStream()));
MemoryStream writeStream = new MemoryStream();
myImage.Save(outStream, System.Drawing.Imaging.ImageFormat.Png);
writeStream.WriteTo(outStream);
myImage.Dispose();
}
}
}
public bool IsReusable {
get {
return false;
}
}
}

Answer 1

Try the following:
var hitArea = new createjs.Shape;
hitArea.graphics.beginFill("#000").drawRect(0,0,100,100);
yourobj.hitArea = hitArea;