StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to use mouse event instead of keycode for HTML5 canvas and jquery?
text
Body
copied!<p>I'd to like to replace the following event management from keycode to mouse. How do I go about doing it?</p> <p>Supported browser for now = FF 3.6x.</p> <pre><code>// this block of code needs to be replaced $(document).keydown(function(e) { //console.log(e.keyCode); switch(e.keyCode) { case 38: // down draw(x,y--); break; case 40: // up draw(x,y++); break; case 37: // left draw(x--,y); break; case 39: // right draw(x++,y); break; default: draw(x,y); } }); // to be replaced with something like the following and add control // we need to get the x,y coordinates upon mouse click, not onload, how? $(document).onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mouseCoords(ev); alert( mousePos); } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; return {x:ev.pageX}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } // keep function draw(x,y) { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var canvas = $("#canvas")[0]; var ctx = canvas.getContext("2d"); ctx.font = "15pt Verdana"; // var ctx.lineWidth = 1; ctx.clearRect(0,0,500,500); x1 = x + 50; y1 = y + 50; ctx.fillText("Oh my god his pant is falling down",x1,y1); x2 = x + 100; y2 = y + 100; ctx.fillText("shi shi we did not see anything",x2,y2); x3 = x + 200; y3 = y + 200; ctx.fillText("what a happy man!",x3,y3); } draw(x,y); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload