This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
In the section "8 The current default path" example "This canvas element has a couple of checkboxes" don`t work. The example's string : "var metrics = context.measureText(element.labels[0].textContent);" is not correctly. May be this is right: "var metrics = context.measureText(element.textContent);"
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>
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the Editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the Tracker Issue; or you may create a Tracker Issue yourself, if you are able to do so. For more details, see this document: http://dev.w3.org/html5/decision-policy/decision-policy.html Status: Resolved Change Description: Added IDs to the labels, and used the new label IDs to get the measureText values. Rationale: The original code did not work correctly. measureText was trying to get a measure from the text in a checkbox that didn't have text.
For the record, the "original code" (as in, what's in the WHATWG spec) works fine per spec. I don't know why it would be broken for the W3C copy.
It didn't work in testing on Firefox, Chrome, and IE. There were actually two errors. The label[0] was causing an error since the checkboxes didn't have a label. The label element that wrapped the checkbox element contained the text, so removing the label[0] portion from the measureText and fillText statements and passing the id of the labels allowed it to be displayed correctly. Errors: In FireFox: TypeError: element.label is undefined var metrics = context.measureText(element.label[0].textContent); In IE: SCRIPT5007: Unable to get property '0' of undefined or null reference test1.html, line 19 character 5
Reopening to research this for more optimization.
(In reply to comment #4) > It didn't work in testing on Firefox, Chrome, and IE. It won't work in Firefox because they don't implement .labels yet. It won't work in Chrome because they don't implement drawCustomFocusRing() yet. Dunno about IE. > the checkboxes didn't have a label They do in the WHATWG spec's example, FWIW. > TypeError: element.label is undefined > var metrics = context.measureText(element.label[0].textContent); The attribute is called "labels". The WHATWG example gets this right as far as I can tell.
>>The attribute is called "labels". The WHATWG example gets this right as far as I can tell. Right, sorry, a typo in transfer. I was inserting and removing pieces of code to check compatibility. It does however, throw an "element.labels is undefined" error in firefox, and an "unable to get property '0' of undefined or null reference" in IE with the original code. If I'm seeing this example correctly, it should demonstrate path, drawCustomFocusRing(), and isPointInPath(). To have additional unsupported features doesn't seem very practical unless they're directly related to the example. I'd rather see this reduced to a simpler example that runs across browsers and demonstrates just the features we're discussing (drawCustomFocusRing() and isPointInPath()).
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the Editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the Tracker Issue; or you may create a Tracker Issue yourself, if you are able to do so. For more details, see this document: http://dev.w3.org/html5/decision-policy/decision-policy.html Status: Rejected Rationale: suggestions appear too confusing, or not different enough in functionality than the current state.
reopening for fix.
Added CR keyword
As an example on how to call drawCustomFocusRing() and isPoingInPath() the example seems to do its job without any changes. The change suggested doesn't seem to affect how to call the two APIs. EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the Editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the Tracker Issue; or you may create a Tracker Issue yourself, if you are able to do so. For more details, see this document: http://dev.w3.org/html5/decision-policy/decision-policy.html Status: Rejected Rationale: suggestions appear too confusing, or not different enough in functionality than the current state.