canvas.text html problem

michele.marzocchi

Hi all,

i'm trying to enable html on canvas.text function but no success.

any suggestion how to resolve the problem?

(in attachment a brief experiment. Instruction canvas.text at line 63 of element instructions_js)

Michele M.

michele.marzocchi

instructions.osexp

eduard

Hi Michele,

I'm in no way an expert, but are you on a Mac by any chance? Have you seen this discussion: https://forum.cogsci.nl/discussion/6630/html-bold-tag-not-working

Maybe your issue is related?

michele.marzocchi

hi eduard,

thank you fr your replay, but i don't use a mac and reading the discussion it seems that the problem is in a "draw textline" inside a sketcpad, but in my case the problem is with canvas.text method inside a inline javascript.

Best Regards,

Michele M.

eduard

Hi Michele,

Too bad, that was that a hunch, @Fab have you encountered anything like this before?

Eduard

Fab

Hi @michele.marzocchi & @eduard ,

Can't say I have encountered that issue before. I'm no expert on the programmatic use of the canvas, and I don't have the solution, but I think I might have an idea of what the source of the problem is, so hopefully someone else out there might know how to go about solving it... Might be a tough one to crack, though, 'cause it looks as if strings are processed differently when running the experiment within OS and when running it through OSWeb:

Incidentally, for line breaks, when programming in Javascript you can use \n instead of <br> or <br/>.

I tried the following change in your code, just to see whether the instructions can be displayed properly when the string sentence is defined directly in Javascript:

function draw_instructions(c)
{
textvar="Sentence with html tags\n\nsentence after double backslash n"
c.text({text:textvar, font_size: 24, html:true}) //html **style args doesn't work
}

That works when executing the experiment with OS (which does not solve the problem, of course, because it fails if you try to read the string from vars.instruction_sentence), but it does not work in OSWeb... So I think that the issue might be with passing of the information from vars.instruction_sentence as a string, at least in OS. In OSWeb, things seem to get a lot more complicated because no matter how I build the string, OSWeb seems to ignore the html tags altogether. It treats the string as al alphanumerical string regardless of contents (i.e., it does not parse it for known html tags). My guess is that this is reflecting the way OSWeb handles strings, but I have no further insights, unfortunately...

Best,

Fabrice.

eduard

Thanks for looking into this @Fab. Well, then @sebastiaan to the rescue?

sebastiaan

Hi @eduard , @michele.marzocchi , and @Fab ,

Indeed, HTML is currently (OSWeb <= 1.4.11) not supported on Canvas objects in JavaScript. This is because of the way that text is rendered by OSWeb on Canvas objects and sketchpad items (using a library called PixiJS).

However, what you can do is use an inline_html item, which for the purpose of instructions is usually also fine. The contents of an inline_html are shown as a regular web-page, and thus HTML tags will work.

• https://osdoc.cogsci.nl/3.3/manual/forms/html/

— Sebastiaan