Tutorial by Examples

Drawing to canvas isn't just limited to shapes and images. You can also draw text to the canvas. To draw text on the canvas, get a reference to the canvas and then call the fillText method on the context. var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fill...

The default font formatting provided by the fillText and strokeText methods isn't very aesthetically appealing. Fortunately the canvas API provides properties for formatting text. Using the font property you can specify: font-style font-variant font-weight font-size / line-height font-family...

Native Canvas API does not have a method to wrap text onto the next line when a desired maximum width is reached. This example wraps text into paragraphs. function wrapText(text, x, y, maxWidth, fontSize, fontFace){ var firstY=y; var words = text.split(' '); var line = ''; var lineHeigh...

This example draws text paragraphs into any portions of the canvas that have opaque pixels. It works by finding the next block of opaque pixels that is large enough to contain the next specified word and filling that block with the specified word. The opaque pixels can come from any source: Path d...

This example fills text with a specified image. Important! The specified image must be fully loaded before calling this function or the drawing will fail. Use image.onload to be sure the image is fully loaded. function drawImageInsideText(canvas,x,y,img,text,font){ var c=canvas.cloneNode();...

This example shows how to render text along an arc. It includes how you can add functionality to the CanvasRenderingContext2D by extending its prototype. This examples is derived from the stackoverflow answer Circular Text. Example rendering Example code The example adds 3 new text renderi...

textOnCurve(text,offset,x1,y1,x2,y2,x3,y3,x4,y4) Renders text on quadratic and cubic curves. text is the text to render offset distance from start of curve to text >= 0 x1,y1 - x3,y3 points of quadratic curve or x1,y1 - x4,y4 points of cubic curve or Example usage: textOnCurve("...

This example renders justified text. It adds extra functionality to the CanvasRenderingContext2D by extending its prototype or as a global object justifiedText (optional see Note A). Example rendering. Code to render this image is in the usage examples at the bottom. The Example The functi...

Renders text as justified paragraphs. REQUIRES the example Justified text Example render Top paragraph has setting.compact = true and bottom false and line spacing is 1.2 rather than the default 1.5. Rendered by code usage example bottom of this example. Example code // Requires justified...