★Canvasリファレンス

HTML + JavaScriptソース

<canvas tabindex="-1" id="example" height="400" width="750" role="application">
 <!-- Canvas Subtree acts as Shadow DOM that the browser maps to the platform accessibility API -->

 <label id="labelA" for="showA"><input id="showA" role="checkbox" aria-labelledby="labelA" type="checkbox" /> Show "A"</label>
 <label id="labelB" for="showB"><input id="showB" role="checkbox" aria-labelledby="labelB" type="checkbox" /> Show "B"</label>

 <!-- ... -->
</canvas>
<script>
/*/
   Canvas is a low level API and requires manual management of all interactivity.
   The following example is quite verbose, and demonstrates the minimum of programming
   necessary to enable a simple checkbox element within canvas.

   Canvasは低レベルのAPIであり、ユーザー操作機能をすべて手動で管理する必要があります。
   このサンプルはとても長くなっていますが、
   canvas内で、チェックボックス要素を扱うために必要な最低限のプログラムとなっています。
/*/
 function drawCheckbox(context, element, x, y, pathOnly) {
   context.save();
   context.font = '10px sans-serif';
   context.textAlign = 'left';
   context.textBaseline = 'middle';

   var label = document.getElementById(element.getAttribute('aria-labelledby'));
   var metrics = context.measureText(label.textContent);

   if(pathOnly) {
    var areaWidth = 15 + metrics.width;
    var areaHeight = 10;
    context.beginPath();
    context.rect(x-5, y-5, areaWidth, areaHeight);
    return;
   }

   context.beginPath();
   context.strokeStyle = 'black';
   context.rect(x-5, y-5, 10, 10);
   context.stroke();
   if (element.checked) {
    context.fillStyle = 'black';
    context.fill();
   }
   context.fillText(label.textContent, x+5, y);

  // Draw the Focus Ring
   var drawFocusManually = false;
   if (document.activeElement == element || document.activeElementFocus == element && document.activeElement == context.canvas) {
  try {
   drawFocusManually = !context.drawFocusRing(element);
  } catch(e) {
   drawFocusManually = true;
  }
   }
   if(drawFocusManually) {
  context.beginPath();
  context.rect(x-7, y-7, 12 + metrics.width+2, 14);
  context.strokeStyle = 'silver';
  context.stroke();
   }
   context.restore();
 }

 function drawBase() { /* ... */ }
 function drawAs() { /* ... */ }
 function drawBs() { /* ... */ }
 function redraw() {
   var canvas = document.getElementsByTagName('canvas')[0];
   var context = canvas.getContext('2d');
   var showA = document.getElementById('showA');
   var showB = document.getElementById('showB');

   context.clearRect(0, 0, canvas.width, canvas.height);
   drawCheckbox(context, showA, 20, 40);
   drawCheckbox(context, showB, 20, 60);
   drawBase();
   if (showA.checked) {
    drawAs();
   }
   if (showB.checked) {
    drawBs();
   }
 }

 function processMouseCoords(event,element) {
   var offsetLeft = 0, offsetTop = 0;
   while(element) {
     offsetLeft += element.offsetLeft >> 0;
     offsetTop += element.offsetTop >> 0;
     element = element.parentNode;
   }
   offsetLeft -= document.documentElement.scrollLeft;
   offsetTop -= document.documentElement.scrollTop;
   return { x: event.clientX - offsetLeft, y: event.clientY - offsetTop }
 }

 function processClick(event){
   var canvas = document.getElementById('example');
   var context = canvas.getContext('2d');
   var coords = processMouseCoords(event,canvas);
   var showA = document.getElementById('showA');
   var showB = document.getElementById('showB');
   var useRedraw = false;
   if(event.target.type == 'checkbox') {
    redraw();
    return;
   }

   drawCheckbox(context, showA, 20, 40, true);
   if (context.isPointInPath(coords.x, coords.y)) {
    showA.checked = !(showA.checked);
    showA.focus();
    document.activeElementFocus = showA;
    useRedraw = true;
   }

   drawCheckbox(context, showB, 20, 60, true);
   if (context.isPointInPath(coords.x, coords.y)) {
    showB.checked = !(showB.checked);
    document.activeElementFocus = showB;
    showB.focus();
    useRedraw = true;
   }

   if(!useRedraw &&
    (document.activeElementFocus != document.activeElement)) {
     document.activeElementFocus = document.activeElement;
     redraw();
   }

   if(useRedraw) redraw();
 }

    // Add the event listeners
 document.getElementById('showA').addEventListener('focus', redraw, true);
 document.getElementById('showB').addEventListener('focus', redraw, true);
 document.getElementById('showA').addEventListener('blur', redraw, true);
 document.getElementById('showB').addEventListener('blur', redraw, true);
 document.getElementById('example').addEventListener('change', redraw, true);
 document.getElementById('example').addEventListener('click', processClick, false);
 redraw();
</script>