Как передвинуть объект в canvas мышкой?

Квадрат передвигается на 3 пикселя с каждым кликом мышки. Как сделать так, чтобы он передвинулся в нужную область одним кликом? Именно передвинулся, а не переместился.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
var x = 50; //отступ слева
var y = 50; //отступ сверху
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");  
var w = c.width;
var h = c.height;
init();
tick();

function init()
{
    //Добавление слушателей
    document.addEventListener("click",onMouseClick,false);
}

function onMouseClick(e)
{
var l = e.clientX;
if(x<l) x+=3;
}

function tick()
{
    ctx.clearRect(0,0,w,h);
    ctx.fillStyle = "white";
    ctx.fillRect(x,y,15,15);
    window.requestAnimationFrame(tick);
}
0
canvas html5 javascript

1 ответов