I'm trying to make a scratch card using canvas with JS. my question is:
can I know if the user have "erased" all the canvas?
I have two images one on top the other, and I managed to make the user "erase" the on-top canvas image. I want to fire up a function when the canvas is empty\completly erased.
Thanks
var offsetT;
var offsetL;
var canvas = document.createElement('canvas');
canvas.id = "canvas";
var canvasWidth = 290;
var canvasheight = 269;
canvas.width = canvasWidth;
canvas.height = canvasheight;
var context = canvas.getContext("2d");
var scratcher = document.getElementById("scratcher");
var radius = 20; //Brush Radius
context.drawImage(scratcher,0,0);
// set image as pattern for fillStyle
context.globalCompositeOperation = 'destination-out';
context.fillStyle = context.createPattern(scratcher, "repeat");
// for demo only, reveals image while mousing over canvas
canvas.onmousemove = function (e) {
var r = this.getBoundingClientRect(),
x = e.clientX - r.left,
y = e.clientY - r.top;
context.beginPath();
context.moveTo(x + radius, y);
context.arc(x, y, radius, 0, 2 * Math.PI);
context.fill();
};
document.body.appendChild(canvas);
document.addEventListener('touchmove', function(e){
var touchobj = e.changedTouches[0]; // reference first touch point (ie: first finger)
var x = touchobj.clientX;
var y = touchobj.clientY;
offsetT = canvas.offsetTop;
offsetL = canvas.offsetLeft;
context.beginPath();
context.moveTo(x-offsetL + radius, y-offsetT);
context.arc(x-offsetL,y-offsetT, radius, 0, 2 * Math.PI);
context.fill();
var cursor = document.getElementById('cursor');
cursor.style.display = 'block';
cursor.style.left = x+ "px";
cursor.style.top = y+ "px";
e.preventDefault();
}, false);
The only way is to check the imageData of the canvas :
var data = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height).data;
var isEmpty = !Array.prototype.some.call(data, function(p){return p>0;});
var ctx = c.getContext('2d');
var isEmpty = function(ctx){
var data = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height).data;
return !Array.prototype.some.call(data, function(p){return p>0;});
}
//first check before drawing
log.innerHTML += isEmpty(ctx)+' ';
//no more empty
ctx.fillRect(0,0,10,10);
// recheck
log.innerHTML += isEmpty(ctx);
/*
we could also have used a for loop :
//in Function
for(var i=0; i<data.length; i++){
if(data[i]>0){
return false;
}
return true;
}
*/
<canvas id="c"></canvas>
<p id="log"></p>
Related
I'm trying to make a section on a website have two background images that will reveal the bottom one as the pointer moves across the screen.
I'm still new to javascript, and my code is made up of bits and pieces that I've found on google, but I can't seem to get the top image to share the same resolution and image size for whatever reason as the bottom image.
Here is the link to my codepen: https://codepen.io/Awktopus/pen/zYwKOKO
And here is my code:
HTML:
<canvas id="main-canvas" id="canvas-size" class="background-size"></canvas>
<image src="https://i.imgur.com/PbGAAIy.jpg" id="upper-image" class="hidden-bg"></img>
<image src="https://i.imgur.com/Gx14sKW.jpg" id="lower-image" class="hidden-bg"></img>
CSS:
.hidden-bg {
display: none;
}
JS:
var can = document.getElementById('main-canvas');
var ctx = can.getContext('2d');
can.width = window.innerWidth;
can.height = window.innerWidth / 2;
var upperImg = document.getElementById("upper-image");
var lowerImg = document.getElementById("lower-image");
var pat = ctx.createPattern(upperImg, "no-repeat");
var canvas = ctx.canvas ;
var hRatio = canvas.width / lowerImg.width ;
var vRatio = canvas.height / lowerImg.height ;
var ratio = Math.max ( hRatio, vRatio );
var centerShift_x = ( canvas.width - lowerImg.width*ratio ) / 2;
var centerShift_y = ( canvas.height - lowerImg.height*ratio ) / 2;
can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);
function redraw(mouse) {
can.width = can.width;
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.drawImage(lowerImg, 0,0, lowerImg.width, lowerImg.height, centerShift_x,centerShift_y,lowerImg.width*ratio, lowerImg.height*ratio);
ctx.beginPath();
ctx.rect(0,0,can.width,can.height);
ctx.arc(mouse.x, mouse.y, 250, 0, Math.PI*2, true)
ctx.clip();
ctx.fillStyle = pat;
ctx.fillRect(0, 0, lowerImg.width, lowerImg.height, centerShift_x, centerShift_y, lowerImg.width*ratio, lowerImg.height*ratio);
}
var img = new Image();
img.onload = function() {
redraw({x: -500, y:-500})
}
function getMouse(e, canvas) {
var element = canvas,
offsetX = 0,
offsetY = 0,
mx, my;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
return {
x: mx,
y: my
};
}
If I understood this right you will want to set the width and height and draw the upper image using drawImage(). Just use the same ratios as the lowerImage. No need to use createPattern for this.
codepen: https://codepen.io/jfirestorm44/pen/BaRLoxX
var can = document.getElementById('main-canvas');
var ctx = can.getContext('2d');
can.width = window.innerWidth;
can.height = window.innerWidth / 2;
var upperImg = document.getElementById("upper-image");
var lowerImg = document.getElementById("lower-image");
//var pat = ctx.createPattern(upperImg, "no-repeat");
var canvas = ctx.canvas ;
var hRatio = canvas.width / lowerImg.width ;
var vRatio = canvas.height / lowerImg.height ;
var ratio = Math.max ( hRatio, vRatio );
var centerShift_x = ( canvas.width - lowerImg.width*ratio ) / 2;
var centerShift_y = ( canvas.height - lowerImg.height*ratio ) / 2;
can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);
function redraw(mouse) {
can.width = can.width;
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.drawImage(lowerImg, 0,0, lowerImg.width, lowerImg.height, centerShift_x,centerShift_y,lowerImg.width*ratio, lowerImg.height*ratio);
ctx.beginPath();
ctx.rect(0,0,can.width,can.height);
ctx.arc(mouse.x, mouse.y, 250, 0, Math.PI*2, true)
ctx.clip();
ctx.drawImage(upperImg, 0,0, lowerImg.width, lowerImg.height, centerShift_x,centerShift_y,lowerImg.width*ratio, lowerImg.height*ratio);
}
var img = new Image();
img.onload = function() {
redraw({x: -500, y:-500})
}
function getMouse(e, canvas) {
var element = canvas,
offsetX = 0,
offsetY = 0,
mx, my;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
return {
x: mx,
y: my
};
}
.hidden-bg {
display: none;
}
<canvas id="main-canvas" id="canvas-size" class="background-size"></canvas>
<image src="https://i.imgur.com/PbGAAIy.jpg" id="upper-image" class="hidden-bg"></img>
<image src="https://i.imgur.com/Gx14sKW.jpg" id="lower-image" class="hidden-bg"></img>
I should draw a rectangle inside a pdf document in canvas, but it cleans the background of document.
I want a way to draw a rectangle in it without cleaning the background. Please can anyone help me with this.
Below is the code i am using:
$("#div").mouseover(function () {
$("canvas").on('click', function (e) {
console.log(nr)
id = ($(this).attr("id"));
console.log(id)
const baseImage = loadImage("");
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
Canvas = ctx;
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var prev_x = prev_y = prev_w = prev_h = 0;
var mousex = mousey = 0;
var mousedown = false;
$(canvas).on('mousedown', function (e) {
if (rectanglearray.length < 2) {
last_mousex = parseInt(e.clientX - canvasx);
last_mousey = parseInt(e.clientY - canvasy);
mousedown = true;
}
});
$(canvas).on('mouseup', function (e) {
mousedown = false;
});
$(canvas).on('mousemove', function (e) {
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
if (mousedown) {
//if (rectanglearray.length < 2) {
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.beginPath();
var width = mousex - last_mousex;
var height = mousey - last_mousey;
ctx.rect(last_mousex, last_mousey, width, height);
a = last_mousex;
b = last_mousey;
c = last_mousex + width;
d = last_mousey + height;
gjer = width;
lart = height;
t = a;
h = b;
gjere = gjer;
larte = lart;
nfq = id.substring(3, 4);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();
rectanglearray.push(ctx);
//}
}
});
execute++;
});
});
so when i click in one of the pages of pdf it takes pages id and allows to only draw a rectangle in that page, but when i draw it cleans the background.
I'm trying to make a ball jump even in midair, but my code always just teleports to the same spot and then jumps, can anydody tell me how to fix this problem of mine? It needs to be able to jump wherever it is at that exact moment, and i've already tried something with set interval.
I'm trying to make a ball jump even in midair, but my code always just teleports to the same spot and then jumps, can anydody tell me how to fix this problem of mine? It needs to be able to jump wherever it is at that exact moment, and i've already tried something with set interval.
I'm trying to make a ball jump even in midair, but my code always just teleports to the same spot and then jumps, can anydody tell me how to fix this problem of mine? It needs to be able to jump wherever it is at that exact moment, and i've already tried something with set interval.
var canvas, ctx, container;
canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
var ball;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var i = Math.floor(Math.random()*11)
color = ["red", "blue","green","yellow","purple","white","pink","silver","teal","turqu oise","magenta","cyan"];
console.log(color[i])
function ballMovement() {
vy += gravity;
ball.y += vy;
if (ball.y + ball.radius > canvas.height) {
ball.y = canvas.height - ball.radius;
vy = 0;
var img = document.getElementById('gameOver');
ctx.drawImage(gameOver, canvas.width/2-436, 100)
ball.radius = 0;
}
}
function init() {
setupCanvas();
var img = document.getElementById('gameOver');
img.style.visibility = 'hidden';
//how high the ball goes
vy = -19;
var y1 = 450
ball = {
x: canvas.width/2,
//where the ball starts moving upwards
y: 480, //here1
radius: 20,
status: 0,
color: color[i]};
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath()
//draw a moving ball
ballMovement();
}
setInterval(draw, 1000 / 35);
function setupCanvas() {
container = document.createElement('div');
container.className = "container";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(container);
container.appendChild(canvas);
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 2;
}
window.onclick = function(jump){
pull + 0.1;
touchGround = false;
init()
draw()
ballMovement()
setupCanvas()
vy+((canvas.height-canvas.height)-ball.y);
}
//GOAL
//Ball jumps at somewhere in screen, let it jump wherever it is.
If I got you correctly you want your ball to go higher and higher. But problem is that you got fixed position where it's starts so where's what you need to change:
var canvas, ctx, container;
canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 800;
ctx = canvas.getContext("2d");
var ball = {
y: 480
};
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
//Creating a variable to know whether our game is running
var gameRunning = 0;
var i = Math.floor(Math.random()*11);
//Adding variable for interval so we can start it with init function
var timer;
color = ["red", "blue","green","yellow","purple","pink","silver","teal","turquoise","magenta","cyan", "black"];
function ballMovement() {
vy += gravity;
ball.y += vy;
if (ball.y + ball.radius > canvas.height) {
ball.y = canvas.height - ball.radius;
vy = 0;
var img = document.getElementById('gameOver');
ctx.drawImage(gameOver, canvas.width/2-436, 100)
ball.radius = 0;
//Stoping the draw function
clearInterval(timer);
//Saying the game isn't running
gameRunning = 0;
}
}
function init() {
//Check if canvas already created
if(!document.querySelector('.container')){
setupCanvas()
}
vy = -19;
var y1 = 450
ball = {
x: canvas.width/2,
y: ball.y,
radius: 20,
status: 0,
color: color[i]
};
//Clearing previous interval if it were any and creating a new one
clearInterval(timer);
timer = setInterval(draw, 1000 / 60);
//Saying the game is running
gameRunning = 1;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath()
ballMovement();
}
function setupCanvas() {
container = document.createElement('div');
container.className = "container";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(container);
container.appendChild(canvas);
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 2;
}
window.onclick = function(){
pull + 0.1;
touchGround = false;
//Check if the game is running or not
//If it's not running - call init
if(!gameRunning){
init();
}
else{
//If game is already running - change speed
vy = -19;
}
//I've also removed some function that were starting with init itself
vy+((canvas.height-canvas.height)-ball.y);
}
I hope you can help me with my problem. I am writing a mobile application with cordova and ionic and we need a function to annotate images before we upload them.
I want to be able to add annotations to an image (at the moment only lines) without resizing the image. But since the screenspace on phones is small i am now using 2 canvas directly placed above each other.
One the first one i render the scaled down image i want to annotate, on the 2nd one i make the annotations. Then i render the original image on 3 canvas and upscale the annotations to the size of the original image.
var finalcanvas = document.createElement('canvas');
var ctxfinal = finalcanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
finalcanvas.width = imageObj.width;
finalcanvas.height = imageObj.height;
ctxfinal.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
var canvaslines = document.getElementById("canvasdraw");
ctxfinal.drawImage(canvaslines, 0, 0, imageObj.width, imageObj.height);
$scope.editimage.image = finalcanvas.toDataURL("image/jpeg");
This works fine, but the only downside is that the annotations are rather pixely. I assume there must be a library or something which should make things like this easier, but no matter how much i searched i could not find anything. But maybe i used the wrong keywords since i am not a very adept programmer and not a native speaker. Thanks for all your help in advance
Edit: Here is a link to a jsfiddle of my code http://jsfiddle.net/q97szydq/14/
One solution would be to store all your points into an array, then redraw them on your new canvas (after you rescaled the points) :
var drawnLines = [];
//in your start functions :
drawnLines.push(["m", x, y]);
//in your move functions :
drawnLines.push(["l", x, y]);
//then in your hideModal function :
var ratio = finalcanvas.width/document.getElementById("canvasdraw").width;
ctxfinal.lineWidth = 3*ratio;
for(i=0; i<drawnLines.length; i++){
var xm = drawnLines[i][1]*ratio;
var ym = drawnLines[i][2]*ratio;
switch (drawnLines[i][0]){
case "l" : ctxfinal.lineTo(xm, ym);
case "m" : ctxfinal.moveTo(xm, ym);
}
}
ctxfinal.stroke();
ctx = document.getElementById("canvasdraw").getContext("2d");
ctx2 = document.getElementById("canvasimg").getContext("2d");
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 3;
var imageObj = new Image();
imageObj.onload = function() { //ion-header-bar
var MAX_WIDTH = 300;
var MAX_HEIGHT = 500;
tempW = imageObj.width;
tempH = imageObj.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
document.getElementById("canvasdraw").height = tempH;
document.getElementById("canvasdraw").width = tempW;
document.getElementById("canvasimg").height = tempH;
document.getElementById("canvasimg").width = tempW;
ctx2.drawImage(imageObj, 0, 0, tempW, tempH);
};
imageObj.src = "http://images2.fanpop.com/image/photos/12900000/Cute-kittens-12929201-1600-1200.jpg";
// setup to trigger drawing on mouse or touch
drawTouch();
drawPointer();
drawMouse();
var drawnLines = [];
//all draw functions have minus 50px height to adjust for header
// prototype to start drawing on touch using canvas moveTo and lineTo
function drawTouch() {
var start = function(e) {
ctx.beginPath();
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY - 50;
ctx.moveTo(x, y);
drawnLines.push(["m", x, y]);
};
var move = function(e) {
e.preventDefault();
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY - 50;
ctx.lineTo(x, y);
ctx.stroke();
drawnLines.push(["l", x, y]);
};
document.getElementById("canvasdraw").addEventListener("touchstart", start, false);
document.getElementById("canvasdraw").addEventListener("touchmove", move, false);
};
// prototype to start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
function drawPointer() {
var start = function(e) {
e = e.originalEvent;
ctx.beginPath();
x = e.pageX;
y = e.pageY - 50;
ctx.moveTo(x, y);
drawnLines.push(["m", x, y]);
};
var move = function(e) {
e.preventDefault();
e = e.originalEvent;
x = e.pageX;
y = e.pageY - 50;
ctx.lineTo(x, y);
ctx.stroke();
drawnLines.push(["l", x, y]);
};
document.getElementById("canvasdraw").addEventListener("MSPointerDown", start, false);
document.getElementById("canvasdraw").addEventListener("MSPointerMove", move, false);
};
// prototype to start drawing on mouse using canvas moveTo and lineTo
function drawMouse() {
var clicked = 0;
var start = function(e) {
clicked = 1;
ctx.beginPath();
x = e.pageX;
y = e.pageY - 50;
ctx.moveTo(x, y);
drawnLines.push(["m", x, y]);
};
var move = function(e) {
if (clicked) {
x = e.pageX;
y = e.pageY - 50;
ctx.lineTo(x, y);
ctx.stroke();
drawnLines.push(["l", x, y]);
}
};
var stop = function(e) {
clicked = 0;
};
document.getElementById("canvasdraw").addEventListener("mousedown", start, false);
document.getElementById("canvasdraw").addEventListener("mousemove", move, false);
document.addEventListener("mouseup", stop, false);
};
var hideModal = function() {
var finalcanvas = document.getElementById("finalcanvas");
var ctxfinal = finalcanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
finalcanvas.width = imageObj.width;
finalcanvas.height = imageObj.height;
ctxfinal.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
ctxfinal.beginPath();
var ratio = finalcanvas.width / document.getElementById("canvasdraw").width;
ctxfinal.lineWidth = 3 * ratio;
for (i = 0; i < drawnLines.length; i++) {
var xm = drawnLines[i][1] * ratio;
var ym = drawnLines[i][2] * ratio;
switch (drawnLines[i][0]) {
case "l":
ctxfinal.lineTo(xm, ym);
case "m":
ctxfinal.moveTo(xm, ym);
}
}
ctxfinal.stroke();
//I then generate a a image from this final canvas. So now i have the image in the original size + the sadly a bit pixely annotations
//$scope.editimage.image = finalcanvas.toDataURL("image/jpeg");
};
imageObj.src = "http://images2.fanpop.com/image/photos/12900000/Cute-kittens-12929201-1600-1200.jpg";
};
canvas {
border: 1px solid #000;
}
<div id="page">
<div class="buttons" style="height:50px;">
<button class="button button-clear" onclick="hideModal()">save</button>
</div>
<canvas id="canvasimg" style="position:absolute;z-index:1;"></canvas>
<canvas id="canvasdraw" style="position:absolute;background:transparent;z-index:99;"></canvas>
</div>
<div style="position:absolute;top:300px;">
<canvas id="finalcanvas"></canvas>
After trying many different things I have finally gotten a cursor to resize upon entry of a canvas but can't figure out how to save the color.
My mouse is based off of this demo: http://jsfiddle.net/AbdiasSoftware/XcjX9/
function loop() {
var color = 'rgb(' + ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ')';
makeCursor(color);
setTimeout(loop, 1000);
}
function makeCursor(color) {
var cursor = document.createElement('canvas'),
ctx = cursor.getContext('2d');
cursor.width = 16;
cursor.height = 16;
ctx.strokeStyle = color;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.moveTo(2, 12);
ctx.lineTo(2, 2);
ctx.lineTo(12, 2);
ctx.moveTo(2, 2);
ctx.lineTo(30, 30)
ctx.stroke();
document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
Here is my current code: http://jsfiddle.net/Vw4yD/
function init(){
var elem = document.getElementById('myCanvas'),
elemLeft = elem.offsetLeft,
elemTop = elem.offsetTop,
context = elem.getContext('2d'),
elements = [];
//Spawn mouse on canvas enter.
elem.addEventListener('mouseover', function() {
makeCursor();
});
//Destroy mouse on canvas exit.
elem.addEventListener('mouseout', function() {
document.body.style.cursor = 'auto';
});
// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
var x = event.pageX - elemLeft,
y = event.pageY - elemTop;
var brushHeight = document.getElementById('brushHeight').value;
var brushWidth = document.getElementById('brushWidth').value;
var brushColor = document.getElementById('brushColor').value;
// Render elements.
elements.forEach(function(element) {
//Listen for controls.
context.fillStyle = brushColor;
context.fillRect(x, y, brushWidth, brushHeight);
});
// Add element.
elements.push({
colour: brushColor,
width: brushWidth,
height: brushHeight,
});
}, false);
//Draw Mouse.
function makeCursor() {
var cursor = document.createElement('canvas'),
cursorctx = cursor.getContext('2d');
var x = event.pageX - elemLeft,
y = event.pageY - elemTop;
var cursorLeft = cursor.offsetLeft;
cursorRight = cursor.offsetTop;
var brushHeight = document.getElementById('brushHeight').value;
var brushWidth = document.getElementById('brushWidth').value;
var brushColor = document.getElementById('brushColor').value;
cursor.width = brushWidth;
cursor.height = brushHeight;
cursorctx.fillStyle = brushColor;
cursorctx.fillRect(x, y, brushWidth, brushHeight);
cursorctx.fill();
document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
};
The mouse is supposed to resize (which it does) and change color when entering the canvas, is there anyway you guys know of to get this to work? It has me stumped, I've worked on it for about a full day now and can't find anyway of doing it using rectangles, stroking works but is too complicated for the basic stuff I need done. Sorry if this post is poorly written, I've had very little sleep in the past day.
Here you go http://jsfiddle.net/Vw4yD/1/
I've removed the x and y for the cursor. They should be equal to 0, because it's relative to the cursor canvas, not the main canvas.