Font, Size, and Style, Canvas Text Stroke, Canvas Text Align, Canvas Text Metrics, Canvas Text Wrap.
Font, Size, and Style
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = 'italic bold 30pt fantasy'; context.fillText('weanswer.xyz', 50, 50); </script> </body> </html> |
Result
Canvas Text Color
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = 'italic bold 30pt fantasy'; context.fillStyle = 'pink'; context.fillText('weanswer.xyz', 50, 50); </script> </body> </html> |
Result
Canvas Text Stroke
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = 'italic 30pt fantasy'; context.strokeStyle = 'pink'; context.lineWidth =1 ; context.strokeText('weanswer.xyz', 50, 50); </script> </body> </html> |
Result
Canvas Text Align
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2; context.font = '30pt Calibri'; context.textAlign = 'center'; context.fillStyle = 'blue'; context.fillText('Hello World!', x, y); </script> </body> </html> |
Result
Canvas Text Baseline
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = 'italic 30pt fantasy'; context.strokeStyle = 'pink'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.lineWidth =1 ; context.strokeText('weanswer.xyz', 300, 50); </script> </body> </html> |
Result
Canvas Text Metrics
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = 'italic 30pt fantasy'; context.strokeStyle = 'pink'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.lineWidth =1 ; var text='weanswer.xyz'; context.strokeText(text, 300, 50); var metrics = context.measureText(text); var width = metrics.width; context.font = '20pt Calibri'; context.textAlign = 'center'; context.fillStyle = '#555'; context.fillText('(' + width + 'px wide)', 300, 50 + 40); </script> </body> </html> |
Result
Canvas Text Wrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="300"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var maxWidth = 400; context.font = 'italic 14pt fantasy'; context.strokeStyle = 'pink'; var x = (canvas.width - maxWidth) / 2; var y = 60; var text='People with questions get the answers they need. WeAnswer is an awesome question & answer website, The answer promises complete guide to the beginners as well as to the experienced WEB programmers who looking forward to improving and update their knowledge in PHP, Mysql, JAVASCRIPT, NODE JS etc. '; wrapTextProcess(context,text, x, y,maxWidth,20); function wrapTextProcess(context, text, x, y, maxWidth, lineHeight){ var words = text.split(' '); var line = ''; for(var n = 0; n < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { context.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { line = testLine; } } context.fillText(line, x, y); } </script> </body> </html> |
Result
More Stories
Amazing html canvas examples
html5 capture image from camera
Canvas Element