0

Using Javascript, I need to print a word over a canvas background (not a huge background, about 400 x 100 at the largest). The word has 3 parts (each a different colour). The word needs to change regularly (at its fastest, every 60 milliseconds or so, though it could be considerably slower than that too), and when it does the position of the word changes too. Word length is uncertain but could be long or short, and font size will vary from about 20 up to 40 points.

EDIT: Please note that I have tested doing everything on a single canvas and it's slower. This question is explicitly to address a background canvas (that sometimes changes a lot, sometimes not at all) with the text displayed in front of it in some way.

Am I better off doing the word on a second (smaller) canvas over the background canvas, or am I better off using HTML with perhaps a div containing spans for the colours, and updating the div's position and contents regularly?

Please note that ideally I need letter spacing, and have proposed the system outlined in Adding Letter Spacing in HTML Canvas

It seems to me that it's a matter of how slow measureText and fillText is, compared to the HTML DOM. My guess is that the Canvas system will be faster, even with the additional work of breaking down the font into characters to display.

Alternatively, if the system I proposed at the link given does NOT work then, on the canvas, I would just use three fillText() commands with different colors and texts, possibly with 3 measureText() commands too. How would that compare with the HTML div system?

Depending on the answers here I may create a test case and use jsperf to find out but I was wondering if I am missing anything obvious here?

To summarise, my three options are:

  1. Two canvases, with the method proposed at Adding Letter Spacing in HTML Canvas
  2. Two canvases, with 3 fillText() commands with different colors and texts, possibly with 3 measureText() commands too
  3. One canvas and one HTML overlay comprising a div with two spans inside it

Which is better? Any thoughts or knowledge on this?

Community
  • 1
  • 1
James Carlyle-Clarke
  • 830
  • 1
  • 12
  • 19
  • No, the answer as given doesn't depend 'on the complexity of the non-text portion of [my] canvas'. I explicitly state 'I need to print a word over a canvas background' and the three options given in my question all imply or specify one canvas (for the background) with the text in front of it in some way. So, __for the question as given__ the only variable is which method is fastest for putting text __in front of__ a background canvas, and I was pretty explicit in the details of the text so it should be enough for at least an opinion. – James Carlyle-Clarke Nov 28 '15 at 04:56
  • *...Any thoughts or knowledge on this?"*...Yes... *"My guess is you'll be fine with one canvas where you recreate & redraw the content along with your .measureTexts & .fillTexts.* You likely won't even need a second canvas or html overlays. But... *"if your canvas content requires extensive resources or processing you may benefit from a second canvas."* – markE Nov 28 '15 at 05:21
  • @markE - thanks for your input. I have already established through testing that splitting the background from the text gives speed benefits (using two canvases). Now I'm trying to work out how best to do the text (ie is there a quicker/better way). I really don't mean to sound ungrateful, because I'm grateful you took the time to comment, but your answer simply doesn't answer the question as given. But thanks anyway - once again you have motivated me to clarify the question a little, to make it super clear that doing everything on a single canvas is not an option.. – James Carlyle-Clarke Nov 28 '15 at 05:26
  • Fair enough...use a second overlayed canvas. The canvas can do many `.measureText`s & `fillText`s per frame so 3+3 is easily accomplished. The canvas better than an html element if you need precise positioning of the letters. – markE Nov 28 '15 at 05:30

0 Answers0