HTML5 Canvas Text

Monkey Forums/Monkey Code/HTML5 Canvas Text

impixi

(Posted 2012) [#1]

Mojo's DrawText command, aside from its limited functionality, can be quite slow on the HTML5 platform, especially when used with non-white colourizations. This little "Canvas Text" module tries to overcome that by utilising the built-in HTML5 canvas vector text functionality.

canvastext.js

var GCanvas, GCanvasRC;

function initRenderContext(id)
{
	GCanvas = document.getElementById(id);
	GCanvasRC = GCanvas.getContext("2d");
}

function SetCanvasFont(fnt)
{
	if (!GCanvasRC) initRenderContext("GameCanvas");

	GCanvasRC.font = fnt;
	SetCanvasTextBaseline("top");
	SetCanvasTextAlign("left");
}

function DrawCanvasText(txt, x, y)
{
	GCanvasRC.fillText(txt, x, y);
}

function FitCanvasText(txt, x, y, maxwidth)
{
	GCanvasRC.fillText(txt, x, y, maxwidth);
}

function SetCanvasTextAlign(ta)
{
	GCanvasRC.textAlign = ta;
}

function SetCanvasTextBaseline(bl)
{
	GCanvasRC.textBaseline = bl;
}

function GetCanvasTextWidth(txt)
{
	return GCanvasRC.measureText(txt).width;
}

canvastext.monkey

'Provides faster, vector text functionality for HTML5 platform.
'(When used in conjunction with mojo.)

'Relevant HTML5 Ref docs:
'http://dev.w3.org/html5/2dcontext/#dom-context-2d-font
'http://dev.w3.org/html5/2dcontext/#drawing-text-to-the-canvas
'http://www.w3.org/TR/css3-fonts/

#If TARGET<>"html5"
#Error "The canvastext module is only available with the html5 target."
#End

Strict

Import "canvastext.js"

Extern

'Set the canvas font.
'fnt: CSS font property syntax. <a href="http://www.w3.org/TR/css3-fonts/#font-prop" target="_blank">http://www.w3.org/TR/css3-fonts/#font-prop</a>
Function SetCanvasFont:Void(fnt:String)

'Draw txt at canvas position x, y.
Function DrawCanvasText:Void(txt:String, x:Float, y:Float)

'Draw txt at canvas position x, y, but squashed into maxwidth if necessary.
Function FitCanvasText:Void(txt:String, x:Float, y:Float, maxwidth:float)

'Set the canvas text alignment.
'ta: possible values are start, end, left, right, and center.
'http://dev.w3.org/html5/2dcontext/#text-styles 
Function SetCanvasTextAlign:Void(ta:String)

'set the canvas text baseline.
'bl: possible values are top, hanging, middle, alphabetic, ideographic, bottom.
'http://dev.w3.org/html5/2dcontext/#text-styles.
Function SetCanvasTextBaseline:Void(bl:String)

'Get the width of txt, calculated on the current canvas font settings.
Function GetCanvasTextWidth:Float(txt:String)

impixi

(Posted 2012) [#2]

Example 1

Strict

Import mojo
Import canvastext

Function Main:Int()

	New MyApp

	Return 0
End

Class MyApp Extends App

	Field ms:int

	Method OnCreate:Int()
	
		'Must set a font first, or you'll get browser errors.
		SetCanvasFont "10pt monospace"
		
		SetUpdateRate 60
		Return 0
	End
	
	Method OnRender:Int()
		
		Cls 0, 0, 0
		SetColor 255, 255, 0
		
		ms = Millisecs()
		
		DrawCanvasText("Hello World!", 100, 100)
		'DrawText "Hello World!", 100, 100

		DrawText String(Millisecs()-ms) + "ms", 10, 10
		
		Return 0
	End
	
End

Example 2

Strict

Import mojo
Import canvastext

Function Main:Int()

	New MyApp

	Return 0
End

Class MyApp Extends App

	Method OnCreate:Int()
	
		SetUpdateRate 60
		Return 0
	End
	
	Method OnRender:Int()
		
		Cls 0, 0, 0
		
		SetColor 0, 255, 0
		SetCanvasFont "bold 24pt 'Comic Sans MS', fantasy"
		SetCanvasTextAlign "center"
		DrawCanvasText "Hello World!", DeviceWidth()/2, 10

		Local str:String = "Hello world again! "
		SetColor 255, 0, 0
		SetCanvasFont "bold italic 12pt cursive"
		DrawCanvasText(str, 10, 100)
		
		SetColor 255, 0, 255
		DrawCanvasText("And again!", 10 + GetCanvasTextWidth(str), 100)

		Return 0
	End
	
End

Beaker

(Posted 2012) [#3]

Really handy. Thanks.

Duke87

(Posted 2012) [#4]

Thank You. Seems to run good at all!

Tamaki

(Posted 2013) [#5]

This is a great job! Thank you.