JavaScript Using the DOM API (with graphical text: Canvas, SVG, or image file)


Using canvas elements

HTML provides the canvas element for building raster-based images.

First build a canvas for holding image pixel information.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

Then select a context for the canvas, in this case two-dimensional:

var ctx = canvas.getContext('2d');

Then set properties related to the text:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

Then insert the canvas element into the page to take effect:


Using SVG

SVG is for building scalable vector-based graphics and can be used within HTML.

First create an SVG element container with dimensions:

var svg = document.createElementNS('', 'svg');
svg.width = 500;
svg.height = 50;

Then build a text element with the desired positioning and font characteristics:

var text = document.createElementNS('', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50'); = 'Times New Roman'; = '50';

Then add the actual text to display to the textelement:

text.textContent = 'Hello world!';

Finally add the text element to our svg container and add the svg container element to the HTML document:


Image file

If you already have an image file containing the desired text and have it placed on a server, you can add the URL of the image and then add the image to the document as follows:

var img = new Image();
img.src = '';