javascript - How to get my text to show up In <canvas> -
im not looking straight answer, love guidance on issue. attempting display text "html5 canavs" in . though code looks correct in comparison many different sites , work book, see boarder of canvas without text. have used firefox , chrome yet both fail display text in canvas. please let me know if missing silly... appreciate guidance!
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>exercise 14.5</title> </head> <body> <canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas> <script> var canvas = document.getelementbyid("text"); var context = canvas.getcontext("2d") context.fillstyle = "green"; context.font = "bold 28px serif"; context.textalign = "center"; context.filltext = ("html5 canvas", 0, 0); context.shadowblur = 6; context.shadowoffsetx = -2; context.shadowoffsety = -5; context.shadowcolor = "grey"; </script> </body> </html>
there couple errors in code:
context.filltext = ("html5 canvas", 0, 0);needs insteadcontext.filltext("html5 canvas", 0, 0);because it's function.- since you've set
context.textalign = "center";, , since text draws above coordinates specify, text being drawn outside of canvas. changefilltextfunction draw somewhere that's on canvas.
fixed (live) example:
var canvas = document.getelementbyid("text"); var context = canvas.getcontext("2d") context.fillstyle = "green"; context.font = "30px arial"; context.textalign = "center"; context.filltext("html5 canvas", 200, 50); context.shadowblur = 6; context.shadowoffsetx = -2; context.shadowoffsety = -5; context.shadowcolor = "grey";<canvas id="text" width="400" height="400" style="border: 1px solid red;"></canvas>
Comments
Post a Comment