alex pandian
Chuckles Champion
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
This project will teach you how to draw text in canvas using javascript. Let's see the parameters that the filltext method and stroketext method intake.
The first parameter is the string of text, second is the x position, and the third is the y position. You can also maximum width. It is optional.
We can also modify the properties of the text. Here's the example:
This is the full code for reference.
Hope you learn from this.
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
- context.fillText
(
'This is the text!'
,
20
,
60
)
;
- context.strokeText
(
'This is the text!'
,
20
,
60
)
;
The first parameter is the string of text, second is the x position, and the third is the y position. You can also maximum width. It is optional.
We can also modify the properties of the text. Here's the example:
- context.font
=
"italic bold 32px Tahoma, sans serif"
;
This is the full code for reference.
- <!DOCTYPE html>
- <html>
- <head>
- <style type="text/css">
- #box{
- width:500px;
- height:300px;
- background:#fff;
- }
- </style>
- <
script type=
"text/javascript"
>
- function
draw_text (
)
{
- var
context =
document.getElementById
(
'box'
)
.getContext
(
'2d'
)
;
- context.fillStyle
=
"#71C0F5"
;
- context.font
=
"italic bold 32px Tahoma, sans serif"
;
- context.fillText
(
'This is the text!'
,
20
,
60
)
;
//First Parameter is the string of text, x position, y position
- context.textAlign
=
'start'
;
//it could be start, end, left, right, center
- context.textBaseline
=
'hanging'
;
// it could be top, middle, bottom, hanging, alphabetic, ideographic
- context.lineWidth
=
2
;
//thickness of stroke
- context.strokeText
(
'This is the text!'
,
20
,
60
)
;
- }
- window.onload
=
draw_text;
- </
script>
- <title>Drawing Text on Canvas</title>
- </head>
- <body>
- <canvas id="box"></canvas>
- </body>
- </html>
Hope you learn from this.
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
You must upgrade your account or reply in the thread to view hidden text.