[Bug 19641] example "This canvas element has a couple of checkboxes" don`t work.

https://www.w3.org/Bugs/Public/show_bug.cgi?id=19641

Jay Munro <jaymunro@microsoft.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
             Status|NEW                         |ASSIGNED

--- Comment #1 from Jay Munro <jaymunro@microsoft.com> ---
I don't think that var metrics = context.measureText(element.textContent);
would work either, since it's the label that contains the text, not the
checkbox. Creating ids for the labels, and passing those in seem to work. 



<! doctype html>
<html>
  <head>
  <title>stuff</title>
    </head>
<body>

<canvas height=400 width=750>
 <label id="showAA"><input type=checkbox id="showA"> Show As</label>
 <label id="showBB"><input type=checkbox id="showB"> Show Bs</label>
   <!-- ... -->
</canvas>
<script>
  function drawCheckbox(context, element, x, y, paint) {
    context.save();
    context.font = '10px sans-serif';
    context.textAlign = 'left';
    context.textBaseline = 'middle';
    var metrics = context.measureText(element.textContent);

    if (paint) {
      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(element.textContent, x + 5, y);
    }
    context.beginPath();
    context.rect(x - 7, y - 7, 12 + metrics.width + 2, 14);
    if (paint && context.drawCustomFocusRing(element)) {
      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');
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawCheckbox(context, document.getElementById('showAA'), 20, 40, true);
    drawCheckbox(context, document.getElementById('showBB'), 20, 60, true);
    drawBase();
    if (document.getElementById('showA').checked)
      drawAs();
    if (document.getElementById('showB').checked)
      drawBs();
  }
  function processClick(event) {
    var canvas = document.getElementsByTagName('canvas')[0];
    var context = canvas.getContext('2d');
    var x = event.clientX;
    var y = event.clientY;
    var node = event.target;
    while (node) {
      x -= node.offsetLeft - node.scrollLeft;
      y -= node.offsetTop - node.scrollTop;
      node = node.offsetParent;
    }
    drawCheckbox(context, document.getElementById('showA'), 20, 40, false);
    if (context.isPointInPath(x, y))
      document.getElementById('showA').checked =
!(document.getElementById('showA').checked);
    drawCheckbox(context, document.getElementById('showB'), 20, 60, false);
    if (context.isPointInPath(x, y))
      document.getElementById('showB').checked =
!(document.getElementById('showB').checked);
    redraw();
  }
  document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw,
true);
  document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw,
true);
  document.getElementsByTagName('canvas')[0].addEventListener('change', redraw,
true);
  document.getElementsByTagName('canvas')[0].addEventListener('click',
processClick, false);
  redraw();
</script>

  </body>
  </html>

-- 
You are receiving this mail because:
You are the QA Contact for the bug.

Received on Monday, 7 January 2013 18:57:28 UTC