phpguru.org - CanvasText: How to get text on to your canvas

Download RGraph - the HTML5 graphing library... Home ~ Downloads ~ FAQs ~ Search ~ Licensing

Blog Categories

[Index]

Me

Articles

PEAR components

PHP5

HTML5

PHP4

Javascript

C#

Update
Looking around at what's available, I've found this. It's much better.

CanvasText: How to get text on your canvas (HTML5)

A Javascript library that allows you to write simple text to your canvas.

The source that produces this text is:


<script type="text/javascript" src="CanvasText.js"></script>

This pulls in the CanvasText library. And this...


<script type="text/javascript">

<!--

    CanvasText(document.getElementById("myCanvas"), // The canvas object

               'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // The text to write

               10, // The X position (the bottom left corner of the text)

               20, // The Y position (the bottom left corner of the text)

               10); // The text height in pixels

// -->

</script>

...simply draws the alphabet. Wonderful eh?

Note: This library is quite large at around 12k, so you may want to gzip it, for example mod_gzip should do it automatically for you. If you're not using Apache, you're on your own... :-) The gzipped version comes out at under 2k - quite a reduction.

Download RGraph - the HTML5 graphing library... Home ~ Downloads ~ FAQs ~ Search ~ Licensing