Усиление фокуса на <canvas>

Question

В настоящее время у меня есть 2 холста, чтобы отображать спереди и сзади рубашку соответственно. Я использовал список, чтобы выбрать, хочу ли я отображать фронт или назад. Я могу решить проблему с помощью якоря (#front), но это будет означать прокрутку к этому конкретному местоположению на веб-странице. У меня есть другие методы для его реализации и установка фокуса на передний холст при загрузке страницы?

<ul style="border:0px solid yellow; padding-left:10px;"> 
    <li id="One"> 
     <a href="#One" id="first" style="height:20px; width:208px; margin-bottom:-8px; padding-bottom:0px;"> 
      <span style="margin-left:15px; font-size:medium;">Front Side</span> 
     </a> 
     <div> 
      <canvas id="collage" width="450" height="450" style="margin:0px; padding:0px;"></canvas> 
     </div> 
    </li> 
    <li id="Two"> 
     <a href="#Two" id="sec" style="height:20px; width:208px; margin-bottom:-8px; padding-bottom:0px;"> 
      <span style="margin-left:15px; font-size:medium;">Back Side</span> 
     </a> 
     <div> 
      <canvas id="collage2" width="450" height="450" style="margin:0px; padding:0px;"></canvas> 
     </div> 
    </li> 
</ul> 

Answer 1

Вы можете дать холсту индекс вкладки:

<canvas 
    id="collage" 
    width="450" 
    height="450" 
    style="margin:0px; padding:0px;" 
    tabindex="1"> 
</canvas> 

, а затем вызвать document.getElementById('collage').focus()

EDIT: Кроме «фокусирующей», если проблема имитации нажмите на и HREF на вы можете сделать следующее с помощью jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('#One').click(); 
}); 
</script> 

Answer 2

<script type="text/javascript"> 
    function focuscanvas() { 
     var canvas = document.getElementById('myGame'); 
     canvas.focus(); 
    }; 
</script> 

Используйте это как событие onclick, когда вам нужно сфокусироваться на холсте.

<button type="button" class="btn btn-default" onclick="focuscanvas()" > 
    Focus on Collage 
</button>