| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <meta charset="UTF-8" /> |
| 4 <title>Canvas Test</title> |
| 5 </head> |
| 6 |
| 7 <body> |
| 8 <p>On success, two same text string with equal width will be rendered.</p> |
| 9 <canvas id="myCanvas" width="500px" height="100px" style="border:1px solid #c3c3
c3;"> |
| 10 Your browser does not support the canvas element. |
| 11 </canvas> |
| 12 <div id="console"></div> |
| 13 |
| 14 <script type="text/javascript"> |
| 15 function compareImageData(img1,img2) |
| 16 { |
| 17 if(img1.data.length != img2.data.length) |
| 18 return false; |
| 19 |
| 20 for(var i = 0; i < img1.data.length; ++i){ |
| 21 if(img1.data[i] != img2.data[i]) |
| 22 return false; |
| 23 } |
| 24 return true; |
| 25 } |
| 26 |
| 27 if (window.testRunner) |
| 28 testRunner.dumpAsText(); |
| 29 |
| 30 var c=document.getElementById("myCanvas"); |
| 31 var ctx=c.getContext("2d"); |
| 32 |
| 33 var fontFamily = "Arial, san-serif"; |
| 34 var fontSize = 20; |
| 35 ctx.font = fontSize + "px " + fontFamily; |
| 36 |
| 37 // This will test both Complex and Simple code path |
| 38 var text1 = "abgfMQO"; |
| 39 var text2 = "العربية"; |
| 40 var text3 = "हिन्दी"; |
| 41 var textCombined = "abgfMQOالعربيةहिन्दी"; |
| 42 var combinedTextXCo = 10; |
| 43 var combinedTextYCo = 50; |
| 44 |
| 45 var xCo = 10; |
| 46 var yCo = 80; |
| 47 var originalXCo = xCo; |
| 48 |
| 49 var textWidthLatin = ctx.measureText(text1).width; |
| 50 var textWidthArabic = ctx.measureText(text2).width; |
| 51 var textWidthHindi = ctx.measureText(text3).width; |
| 52 var textCombinedWidth = ctx.measureText(textCombined).width; |
| 53 var finalWidth = textWidthLatin+textWidthHindi+textWidthArabic; |
| 54 |
| 55 // draw combined string in single call, in this width returned from drawText |
| 56 // will be used to calculate width of string and next x-coordinate position |
| 57 ctx.fillStyle = "black"; |
| 58 ctx.fillText(textCombined, combinedTextXCo, combinedTextYCo); |
| 59 ctx.fillText(" - width: " + textCombinedWidth, combinedTextXCo + textCombinedWid
th, combinedTextYCo); |
| 60 |
| 61 // draw individual strings in different calls using measureString call to get wi
dth of string |
| 62 // and next x-coordinate position |
| 63 ctx.fillText(text1, xCo, yCo); |
| 64 xCo += textWidthLatin; |
| 65 ctx.fillText(text2, xCo, yCo); |
| 66 xCo += textWidthHindi; |
| 67 ctx.fillText(text3, xCo, yCo); |
| 68 xCo += textWidthArabic; |
| 69 ctx.fillText(" - width: " + finalWidth, xCo, yCo); |
| 70 |
| 71 // get Image data for strings rendered on Canvas |
| 72 var imgDataCombinedText = ctx.getImageData(10,combinedTextXCo-fontSize, textComb
inedWidth,fontSize); |
| 73 var imgData = ctx.getImageData(10, originalXCo-fontSize, finalWidth,fontSize); |
| 74 |
| 75 if (compareImageData(imgDataCombinedText, imgData)) |
| 76 document.getElementById("console").innerHTML = "TEST PASSED"; |
| 77 else |
| 78 document.getElementById("console").innerHTML = "TEST FAILED"; |
| 79 |
| 80 </script> |
| 81 </body> |
| 82 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 519373002:
Return width from drawText to stop re-measure in Canvas (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master