Want more features on Pastebin? Sign Up, it's FREE!
Guest

Canvas 2d Pointer Checkbox

By: a guest on Nov 14th, 2011  |  syntax: JavaScript  |  size: 5.33 KB  |  views: 1,367  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. <canvas tabindex="-1" id="example" height="400" width="750" role="application" aria-busy="true">
  3.  <!-- Canvas Subtree acts as Shadow DOM that the browser maps to the platform accessibility API -->
  4.  <label id="labelA" for="showA"><input id="showA" role="checkbox" aria-labelledby="labelA" type="checkbox" /> Show "A"</label>
  5.  <label id="labelB" for="showB"><input id="showB" role="checkbox" aria-labelledby="labelB" type="checkbox" /> Show "B"</label>
  6.  
  7.  <!-- ... -->
  8. </canvas>
  9. <script>
  10. /*/
  11.    Canvas is a low level API and requires manual management of all interactivity.
  12.    The following example is quite verbose, and demonstrates the minimum of programming
  13.    necessary to enable a simple checkbox element within canvas.
  14. /*/
  15.  function drawCheckbox(context, element, x, y, pathOnly) {
  16.    context.save();
  17.    context.font = '10px sans-serif';
  18.    context.textAlign = 'left';
  19.    context.textBaseline = 'middle';
  20.  
  21.    var label = document.getElementById(element.getAttribute('aria-labelledby'));
  22.    var metrics = context.measureText(label.textContent);
  23.  
  24.    if(pathOnly) {
  25.     var areaWidth = 15 + metrics.width;
  26.     var areaHeight = 10;
  27.     context.beginPath();
  28.     context.rect(x-5, y-5, areaWidth, areaHeight);
  29.     return;
  30.    }
  31.  
  32.    context.beginPath();
  33.    context.strokeStyle = 'black';
  34.    context.rect(x-5, y-5, 10, 10);
  35.    context.stroke();
  36.    if (element.checked) {
  37.     context.fillStyle = 'black';
  38.     context.fill();
  39.    }
  40.    context.fillText(label.textContent, x+5, y);
  41.  
  42.   // Draw the Focus Ring
  43.    var drawFocusManually = false;
  44.    if (document.activeElement == element || document.activeElementFocus == element && document.activeElement == context.canvas) {
  45.   try {
  46.    drawFocusManually = !context.drawFocusRing(element);
  47.   } catch(e) {
  48.    drawFocusManually = true;
  49.   }
  50.    }
  51.    if(drawFocusManually) {
  52.   context.beginPath();
  53.   context.rect(x-7, y-7, 12 + metrics.width+2, 14);
  54.   context.strokeStyle = 'silver';
  55.   context.stroke();
  56.    }
  57.    context.restore();
  58.  }
  59.  
  60.  function drawBase() { /* ... */ }
  61.  function drawAs() { /* ... */ }
  62.  function drawBs() { /* ... */ }
  63.  function redraw() {
  64.    var canvas = document.getElementsByTagName('canvas')[0];
  65.    var context = canvas.getContext('2d');
  66.    var showA = document.getElementById('showA');
  67.    var showB = document.getElementById('showB');
  68.  
  69.    context.clearRect(0, 0, canvas.width, canvas.height);
  70.  
  71. var busy = Boolean(canvas.getAttribute('aria-busy') == 'true');
  72. if(busy) canvas.removeAttribute('aria-busy');
  73.  
  74. if(busy && context.setPathForElement) {
  75.    drawCheckbox(context, showA, 20, 40, true);
  76.    context.setPathForElement(showA);
  77.    drawCheckbox(context, showB, 20, 60, true);
  78.    context.setPathForElement(showB);
  79.    busy = false;
  80. }
  81.  
  82. if(busy && context.beginElement) context.beginElement(showA);
  83.    drawCheckbox(context, showA, 20, 40);
  84. if(busy && context.beginElement) context.beginElement(showB);
  85.    drawCheckbox(context, showB, 20, 60);
  86. if(busy && context.beginElement) context.endElement();
  87.  
  88.  
  89.    drawBase();
  90.    if (showA.checked) {
  91.     drawAs();
  92.    }
  93.    if (showB.checked) {
  94.     drawBs();
  95.    }
  96.  }
  97.  
  98.  function processMouseCoords(event,element) {
  99.    var offsetLeft = 0, offsetTop = 0;
  100.    while(element) {
  101.      offsetLeft += element.offsetLeft >> 0;
  102.      offsetTop += element.offsetTop >> 0;
  103.      element = element.parentNode;
  104.    }
  105.    offsetLeft -= document.documentElement.scrollLeft;
  106.    offsetTop -= document.documentElement.scrollTop;
  107.    return { x: event.clientX - offsetLeft, y: event.clientY - offsetTop }
  108.  }
  109.  
  110.  function processClick(event){
  111.    var canvas = document.getElementById('example');
  112.    var context = canvas.getContext('2d');
  113.    var coords = processMouseCoords(event,canvas);
  114.    var showA = document.getElementById('showA');
  115.    var showB = document.getElementById('showB');
  116.    var useRedraw = false;
  117.    if(event.target.type == 'checkbox') {
  118.     redraw();
  119.     return;
  120.    }
  121.  
  122.    drawCheckbox(context, showA, 20, 40, true);
  123.    if (context.isPointInPath(coords.x, coords.y)) {
  124.     showA.checked = !(showA.checked);
  125.     showA.focus();
  126.     document.activeElementFocus = showA;
  127.     useRedraw = true;
  128.    }
  129.  
  130.    drawCheckbox(context, showB, 20, 60, true);
  131.    if (context.isPointInPath(coords.x, coords.y)) {
  132.     showB.checked = !(showB.checked);
  133.     document.activeElementFocus = showB;
  134.     showB.focus();
  135.     useRedraw = true;
  136.    }
  137.  
  138.    if(!useRedraw &&
  139.     (document.activeElementFocus != document.activeElement)) {
  140.      document.activeElementFocus = document.activeElement;
  141.      redraw();
  142.    }
  143.  
  144.    if(useRedraw) redraw();
  145.  }
  146.  
  147.  // Add the event listeners
  148.  document.getElementById('showA').addEventListener('focus', redraw, true);
  149.  document.getElementById('showB').addEventListener('focus', redraw, true);
  150.  document.getElementById('showA').addEventListener('blur', redraw, true);
  151.  document.getElementById('showB').addEventListener('blur', redraw, true);
  152.  document.getElementById('example').addEventListener('change', redraw, true);
  153.  document.getElementById('showA').onclick = function() { this.checked = !(this.checked); };
  154.  document.getElementById('showB').onclick = function() { this.checked = !(this.checked); };
  155.  if(!(CanvasRenderingContext2D.prototype.beginElement ||
  156.      CanvasRenderingContext2D.prototype.setPathForElement))
  157.  document.getElementById('example').addEventListener('click', processClick, false);
  158.  redraw();
  159. </script>
  160.  
clone this paste RAW Paste Data