19641 2012-10-19 19:10:05 +0000 example "This canvas element has a couple of checkboxes" don`t work. 2013-09-17 00:21:59 +0000 1 1 1 Unclassified HTML WG HTML Canvas 2D Context unspecified PC Windows NT RESOLVED WONTFIX CR P2 normal --- 1 __igor jaymunro ian mike public-html-admin public-html-wg-issue-tracking public-html-bugzilla oldest_to_newest 76733 0 __igor 2012-10-19 19:10:05 +0000 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);" 81003 1 jaymunro 2013-01-07 18:57:27 +0000 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> 81140 2 jaymunro 2013-01-09 18:52:41 +0000 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. 81164 3 ian 2013-01-10 01:02:42 +0000 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. 81171 4 jaymunro 2013-01-10 03:40:43 +0000 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 81207 5 jaymunro 2013-01-10 21:55:56 +0000 Reopening to research this for more optimization. 81208 6 ian 2013-01-10 22:30:00 +0000 (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. 81249 7 jaymunro 2013-01-11 16:42:42 +0000 >>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()). 83948 8 jaymunro 2013-03-04 17:44:37 +0000 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. 83949 9 jaymunro 2013-03-04 17:45:49 +0000 reopening for fix. 92689 10 jaymunro 2013-08-28 17:34:22 +0000 Added CR keyword 93467 11 jaymunro 2013-09-17 00:21:59 +0000 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.