javascript - Canvas change elements one by one after a time passes -

i working animations in canvas , wanted make plain ol word changes plain text unplain example... plain black words bold multicolored letters. tried...

html

<canvas id="ctx" height="500" width="500">  </canvas>  

js

var ctx = document.getelementbyid("ctx"); var word = ['h', 'e', 'l', 'l', 'o']; ctx.filltext(word, 50, 50); (var = 0; < word.length; i++) {     ctx.font = "comic sans";     ctx.stroketext(word, 50, 50); } 

my goal print after few seconds or 1 one change text

first thing need right context. 2d context.

var ctx = document.getelementbyid("ctx").getcontext("2d"); 

next loop going hold execution of javascript until completes. won't change rendering. that, you'll need use setinterval.

now got code executing every few seconds, next problem you're drawing on top of last rendered. you'll need add clearrect erase previous render see new render.

here simple example in jsfiddle based off of code.