| <html> |
| <body style="overflow:hidden;"> |
| <canvas id="canvas" width=600 height=600 style="border:5px solid black"> |
| <script> |
| var ctx = document.getElementById('canvas').getContext('2d'); |
| var lingrad = ctx.createLinearGradient(0,0,600,600); |
| lingrad.addColorStop(0, '#00ABEB'); |
| lingrad.addColorStop(1.0, '#fff'); |
| |
| var x = 10; |
| var y = 30; |
| |
| ctx.font = "32px 'Times New Roman'"; |
| ctx.fillText("Normal Fill Text", x, y); |
| |
| y += 40; |
| |
| ctx.lineWidth = 2; |
| ctx.strokeText("Normal Stroke Text", x, y); |
| |
| y += 40; |
| |
| ctx.fillStyle = lingrad; |
| ctx.fillText("Gradient Fill Text", x, y); |
| |
| y += 40; |
| |
| ctx.strokeStyle = lingrad; |
| ctx.strokeText("Gradient Stroke Text", x, y); |
| |
| ctx.textAlign = "end"; |
| |
| x = 590; |
| y += 40; |
| |
| ctx.fillStyle = 'black'; |
| ctx.fillText("Normal Fill Text", x, y); |
| |
| y += 40; |
| |
| ctx.strokeStyle = 'black'; |
| ctx.lineWidth = 2; |
| ctx.strokeText("Normal Stroke Text", x, y); |
| |
| y += 40; |
| |
| ctx.fillStyle = lingrad; |
| ctx.fillText("Gradient Fill Text", x, y); |
| |
| y += 40; |
| |
| ctx.strokeStyle = lingrad; |
| ctx.strokeText("Gradient Stroke Text", x, y); |
| |
| y += 40; |
| x = 300; |
| |
| ctx.textAlign = "center"; |
| |
| ctx.fillStyle = 'black'; |
| ctx.fillText("Normal Fill Text", x, y); |
| |
| y += 40; |
| |
| ctx.strokeStyle = 'black'; |
| ctx.lineWidth = 2; |
| ctx.strokeText("Normal Stroke Text", x, y); |
| |
| y += 40; |
| |
| ctx.fillStyle = lingrad; |
| ctx.fillText("Gradient Fill Text", x, y); |
| |
| y += 40; |
| |
| ctx.strokeStyle = lingrad; |
| ctx.strokeText("Gradient Stroke Text", x, y); |
| |
| y += 40; |
| |
| </script> |
