cagirici cagirici - 29 days ago 9
HTML Question

How to draw circle centered at mouse location when a key is pressed

I am trying to change this jQuery code slightly:

jQuery(document).ready(function(){
$('#canvas').attr('height', $('#canvas').css('height'));
$('#canvas').attr('width', $('#canvas').css('width'));
$("#special").click(function(e){

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

/* var c=document.getElementById("special"); */
var ctx= this.getContext("2d"); /*c.getContext("2d");*/
ctx.beginPath();
ctx.arc(x, y, 50,0, 2*Math.PI);
ctx.stroke();

$('#status').html(x +', '+ y);
});
})


Which I use with this HTML code

<body>
<h2 id="status">0, 0</h2>
<canvas style="width: 1000px; height: 1000px; border:1px ridge green;" id="canvas">

</canvas>
</body>
</html>


and trying to draw circles with radius 5 with key press.

Instead of clicking, I want a circle to appear on canvas whenever I press a key on the keyboard. Therefore, I should keep the mouse position.

I tried
mousemove
:

jQuery(document).ready(function(){
$('#canvas').attr('height', $('#canvas').css('height'));
$('#canvas').attr('width', $('#canvas').css('width'));
var x = -1;
var y = -1;
$("#canvas").mousemove(function(e) {
x = e.pageX;
y = e.pageY;
});
$("#canvas").keypress(function(e){
var ctx= this.getContext("2d");
ctx.beginPath();
ctx.arc(x, y, 5,0, 2*Math.PI);
ctx.stroke();

$('#status').html(x +', '+ y);
});

})


Which did not work.

As you can guess, I am pretty new to jQuery. Therefore, I might have some syntax errors (which I believe I do not because my Chrome debugger does not show any).

My ultimate goal is to create draggable circles with keypresses. This is my first step. Can you help me?

Answer

The main problem here is that you can't focus on a canvas and without focus, it doesn't take keyboard input. Instead, setup a keypress listener on the document and check if you're over the canvas.

jQuery(document).ready(function() {
  $('#canvas').attr('height', $('#canvas').css('height'));
  $('#canvas').attr('width', $('#canvas').css('width'));
  var x = -1;
  var y = -1;

  // Make sure the mouse is over the canvas
  var overCanvas = false;
  $('#canvas').mouseover(function() {
    overCanvas = true;
  });
  $('#canvas').mouseleave(function() {
    overCanvas = false;
  });
  $("#canvas").mousemove(function(e) {
    // Use offset[X/Y] instead of page[X/Y]
    // page[X/Y] will only be accurate if the canvas
    // takes up the whole page
    x = e.offsetX;
    y = e.offsetY;
  });
  $(document).keypress(function(e) {
    if (!overCanvas) {
      return;
    }
    var canvas = $('#canvas')[0];
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = '#FFF'; // Stroke in white
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, 2 * Math.PI);
    ctx.stroke();

    $('#status').html(x + ', ' + y);
  });

})
canvas {
  display: block;
  background: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="320" height="240"></canvas>
<span id="status"></span>