# Set focus on canvas

**URL:** <https://discourse.processing.org/t/set-focus-on-canvas/37617>\
**Category:** Coding Questions\
**Created:** [June 18, 2022, 1:10pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617 "2022-06-18T13:10:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [June 18, 2022, 1:10pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617/1 "2022-06-18T13:10:32Z")

</div>

Hi.  
In my project, I want to select shapes with radio buttons and move them with my keyboard arrow keys.  
The problem is that I need to click on the canvas after each button choice, or else the radio buttons will alternate. To avoid this I tried to solve this to set the focus on canvas with each mouse release, but without success.  
What could be the solution?

```auto
let rectan = false; let ball = true;
let rx = 150; ry = 150; cx = 200; cy = 250;

function setup() {
  let canvas = createCanvas(400, 400);
  radio = createRadio();
  radio.option(" rectangle");
  radio.option(" circle");
  radio.style("width", "80px");
  radio.style("line-height", "0");
  radio.position(10, 13);
  radio.style("font-size", "13px");
  radio.option(" rectangle").checked = true;
}

function draw() {
  background(220);
  if (keyIsPressed){
    if(radio.value() == " rectangle") {rectan = true; ball = false;}
    if(radio.value() == " circle") {ball = true; rectan = false;}
    if (rectan) {
      if (keyCode === RIGHT_ARROW ) rx++;
      if (keyCode === LEFT_ARROW) rx--;
      if (keyCode === UP_ARROW) ry--;
      if (keyCode === DOWN_ARROW) ry++;
    }
    if (ball) {
      if (keyCode === RIGHT_ARROW ) cx++;
      if (keyCode === LEFT_ARROW) cx--;
      if (keyCode === UP_ARROW) cy--;
      if (keyCode === DOWN_ARROW) cy++;
    }
  }
  rect(rx, ry, 100, 50);
  circle(cx, cy, 50);
}

function mouseReleased() {
  //canvas.elt.focus();
  this.focus;
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 18, 2022, 1:42pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617/2 "2022-06-18T13:42:38Z")

</div>

Hi @J_Silva,

that won’t work … [use blur() instead](https://www.w3schools.com/jsref/met_html_blur.asp)

```auto
function draw() {
  background(220);  
  radio.option(" rectangle").blur(); // remove focus from element
  radio.option(" circle").blur(); // remove focus from element
  if (keyIsPressed){    
    if (radio.value() === " rectangle") { // you can also change the if like this, then you not need the booleans rectan, ball
      if (keyCode === RIGHT_ARROW ) rx++;
      if (keyCode === LEFT_ARROW) rx--;
      if (keyCode === UP_ARROW) ry--;
      if (keyCode === DOWN_ARROW) ry++;
    }
    else {
      if (keyCode === RIGHT_ARROW ) cx++;
      if (keyCode === LEFT_ARROW) cx--;
      if (keyCode === UP_ARROW) cy--;
      if (keyCode === DOWN_ARROW) cy++;
    }
  }
  rect(rx, ry, 100, 50);
  circle(cx, cy, 50);
}  

```

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [June 18, 2022, 2:08pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617/3 "2022-06-18T14:08:19Z")

</div>

Great! Thank you . …

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [June 18, 2022, 2:35pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617/4 "2022-06-18T14:35:55Z")

</div>

@mnse  
And if I want to remove the focus of a slider? How can you achieve that?  
Thanks

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 18, 2022, 2:50pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617/5 "2022-06-18T14:50:46Z")

</div>

Hi @J_Silva

```auto
sliderObj.elt.blur();

```

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [June 18, 2022, 3:02pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617/6 "2022-06-18T15:02:41Z")

</div>

Once again, many thanks.