How can I write text on a HTML5 canvas element?

by 
var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", (canvas.width / 2) - 17, (canvas.height / 2) + 8);
#my-canvas {
  background: #FF0;
}
<canvas id="my-canvas" width="200" height="120"></canvas>

More Related Contents:

  1. Canvas width and height in HTML5
  2. HTML5 Canvas Rotate Image
  3. Draw on HTML5 Canvas using a mouse
  4. Drawing an SVG file on a HTML5 canvas
  5. html5 – canvas element – Multiple layers
  6. How can I convert an HTML element to a canvas element?
  7. How to Copy Contents of One Canvas to Another Canvas Locally
  8. HTML5 Canvas and Anti-aliasing [duplicate]
  9. Canvas drawings, like lines, are blurry
  10. Base64 PNG data to HTML5 canvas
  11. How to draw a rounded rectangle using HTML Canvas?
  12. How do I make a transparent canvas in html5?
  13. Can you take a “screenshot” of the page using Canvas?
  14. get click event of each rectangle inside canvas?
  15. canvas default size
  16. Gradient Stroke Along Curve in Canvas
  17. Drawing a dot on HTML5 canvas [duplicate]
  18. HTML5 Canvas slows down with each stroke and clear
  19. context.getImageData() operation is insecure
  20. All html canvas shapes are given the color of the last object added
  21. How can I use custom fonts in an HTML5 Canvas element?
  22. Create links in HTML canvas
  23. Browser Canvas CORS Support for Cross Domain Loaded Image Manipulation
  24. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  25. How put percentage width into html canvas (no css)
  26. HTML5 Canvas and Line Width
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment