HTML5 Canvas Wrapper

Monkey Forums/Monkey Code/HTML5 Canvas Wrapper

impixi

(Posted 2011) [#1]

PURPOSE: Provide extended HTML5 canvas functionality, including canvas text, 'stroke', lines, shadows, pixel manipulation, textured polygons etc.

To use, save the following files into a project folder:

canvasmods.js

var GCanvas, GCanvasRC;

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

function setFillGradient(grad)
{
	GCanvasRC.fillStyle = grad;
}

function setFillPattern(patt)
{
	GCanvasRC.fillStyle = patt;
}

function setStrokeGradient(grad)
{
	GCanvasRC.strokeStyle = grad;
}

function setStrokePattern(patt)
{
	GCanvasRC.strokeStyle = patt;
}

function loadHTMLImage(url)
{
	var img = new Image();
	img.src = url;

	return img;
}

canvaswrapper.monkey

#rem

canvaswrapper.monkey

-----------------------------------------------------------------------------
---------------------------- Extended HTML5 Canvas Functionality ------------
-----------------------------------------------------------------------------

PURPOSE: Provide extended HTML5 canvas functionality, including canvas text, 
'stroke', lines, shadows, pixel manipulation, textured polygons etc.

DATE: November 2011

LICENSE: Public Domain

VERSION: 0.1

NOTES:

	Coded in Monkey Pro V48
	Performance and feature-support will be browser- and platform- dependent.
	** See the examples for usage! **
	** See the 'relevant standands' documents for certain parameter specifics! **

RELEVANT STANDARDS:
	<a href="http://dev.w3.org/html5/2dcontext/" target="_blank">http://dev.w3.org/html5/2dcontext/</a>
	<a href="http://dev.w3.org/csswg/css3-color/" target="_blank">http://dev.w3.org/csswg/css3-color/</a>
	<a href="http://www.w3.org/TR/css3-fonts/" target="_blank">http://www.w3.org/TR/css3-fonts/</a>

#end

Strict

#if TARGET<>"html5"
#error "The canvaswrapper module is only functional with the html5 target."
#end

Import "canvasmods.js"

Extern

'%% HTML5 DOM class wrappers (partial) %%

Class HTMLCanvasElement

	Field width:Int
	Field height:Int

	Method getContext:Object(contextId:String)
	Method getContext:Object(contextId:String, arg0:Object)	
	Method getContext:Object(contextId:String, arg0:Object, arg1:Object)	

End

Class HTMLImageElement

	Field width:Int
	Field height:Int
	
	Field complete:Bool
	
End

Class CanvasRenderingContext2D

	Field canvas:HTMLCanvasElement
	
	Field globalAlpha:Float
	Field globalCompositeOperation:String
	
	Field strokeStyle:String
	Field fillStyle:String

	Field lineWidth:Float
	Field lineCap:String
	Field lineJoin:String
	Field miterLimit:Float	
	
	Field shadowOffsetX:Float
	Field shadowOffsetY:Float
	Field shadowBlur:Float
	Field shadowColor:String
	
	Field font:String
	Field textAlign:String
	Field textBaseline:String
	
	Method save:Void()
	Method restore:Void()
	
	Method scale:Void(x:Float, y:Float)
	Method rotate:Void(angle:Float)
	Method translate:Void(x:Float, y:Float)
	Method transform:Void(m11:Float, m12:Float, m21:Float, m22:Float, dx:Float, dy:Float)
	Method setTransform:Void(m11:Float, m12:Float, m21:Float, m22:Float, dx:Float, dy:Float)
	
	Method drawImage:Void(image:Object, dx:Float, dy:Float)
	Method drawImage:Void(image:Object, dx:Float, dy:Float, dw:Float, dh:Float)
	Method drawImage:Void(image:Object, sx:Float, sy:Float, sw:Float, sh:Float, dx:Float, dy:Float, dw:Float, dh:Float)	

	Method createLinearGradient:CanvasGradient(x0:Float, y0:Float, x1:Float, y1:Float)
	Method createRadialGradient:CanvasGradient(x0:Float, y0:Float, r0:Float, x1:Float, y1:Float, r1:Float)
	Method createPattern:CanvasPattern(image:HTMLImageElement, repetition:String)

	Method beginPath:Void()
	Method closePath:Void()
	Method fill:Void()
	Method stroke:Void()
	Method clip:Void()
	Method moveTo:Void(x:Float, y:Float)
	Method lineTo:Void(x:Float, y:Float)
	Method quadraticCurveTo:Void(cpx:Float, cpy:Float, x:Float, y:Float)
	Method bezierCurveTo:Void(cp1x:Float, cp1y:Float, cp2x:Float, cp2y:Float, x:Float, y:Float)
	Method arcTo:Void(x1:Float, y1:Float, x2:Float, y2:Float, radius:Float)
	Method arc:Void(x:Float, y:Float, radius:Float, startAngle:Float, endAngle:Float, anticlockwise:Bool)
	Method rect:Void(x:Float, y:Float, w:Float, h:Float)
	Method isPointInPath:Bool(x:Float, y:Float)
	
	Method fillText:Void(text:String, x:Float, y:Float)
	Method fillText:Void(text:String, x:Float, y:Float, maxWidth:Float)
	Method strokeText:Void(text:String, x:Float, y:Float)
	Method strokeText:Void(text:String, x:Float, y:Float, maxWidth:Float)
	Method measureText:TextMetrics(text:String)
	
	Method clearRect:Void(x:Float, y:Float, w:Float, h:Float)
	Method fillRect:Void(x:Float, y:Float, w:Float, h:Float)
	Method strokeRect:Void(x:Float, y:Float, w:Float, h:Float)
	
	Method createImageData:ImageData(sw:Float, sh:Float)
	Method getImageData:ImageData(sx:Float, sy:Float, sw:Float, sh:Float)
	Method putImageData:Void(imagedata:ImageData, dx:Float, dy:Float)
	Method putImageData:Void(imagedata:ImageData, dx:Float, dy:Float, dirtyX:Float, dirtyY:Float, dirtyWidth:Float, dirtyHeight:Float)

End

Class CanvasGradient

	Method addColorStop:Void(offset:Float, color:String)

End

Class CanvasPattern

End

Class TextMetrics

	Field width:Float

End

Class ImageData

	Field width:Int
	Field height:Int
	Field data:Int[]	

End

Class CanvasPixelArray

	Field length:Int

End


'-- External convenience functions (mapped to canvasmods.js) --

Function initRenderContext:CanvasRenderingContext2D(id:String)
Function setFillGradient:Void(grad:CanvasGradient)
Function setStrokeGradient:Void(grad:CanvasGradient)
Function setFillPattern:Void(patt:CanvasPattern)
Function setStrokePattern:Void(patt:CanvasPattern)
Function loadHTMLImage:HTMLImageElement(url:String)


'*************************************************


Public


'&& This is the core, globally accessible variable for the canvas
Global xCanvas:CanvasExtras = New CanvasExtras()


'%% Convenience class %%

Class CanvasExtras

	'-- FIELDS
	
	Field renderContext:CanvasRenderingContext2D
	
	
	'-- CONTRUCTOR(S)
		
	Method New()

		'"GameCanvas" is the id that mojo assigns the HTML canvas element
		renderContext = initRenderContext("GameCanvas")		

	End


	'-- MISCELLANEOUS --
	
	Method Resize:Void(w:Int, h:Int)
	
		renderContext.canvas.width = w
		renderContext.canvas.height = h
	
	End


	'-- FONT, TEXT	

	Method SetFont:Void(fnt:String)
		'fnt: CSS font specifier
		
		renderContext.font = fnt
		
	End

	Method SetTextAlign:Void(al:String)
		'al: CSS alignment specifier (start, end, left, right, center)
	
		renderContext.textAlign = al
		
	End

	Method SetTextBaseline:Void(bl:String)
		'bl: CSS baseline specifier (top, hanging, middle, alphabetic, ideographic, bottom)
	
		renderContext.textBaseline = bl
		
	End
	
	Method GetTextWidth:Float(txt:String)
		'Return the length of txt in pixels

		Return renderContext.measureText(txt).width

	End

	Method DrawText:Void(txt:String, x:Float, y:Float, fill:Bool = True, stroke:Bool = True)
		'draw txt at pixel coordinate x, y, filled (fill) and/or stroked (stroke) 
	
		If fill Then renderContext.fillText txt, x, y
		If stroke Then renderContext.strokeText txt, x, y
	
	End

	Method DrawText:Void(txt:String, x:Float, y:Float, maxWidth:Float, fill:Bool = True, stroke:Bool = True)
		'draw txt at pixel coordinate x, y, compressed horizontally into maxWidth pixels,
		'filled (fill) and/or stroked (stroke)
				
		If fill Then renderContext.fillText txt, x, y, maxWidth
		If stroke Then renderContext.strokeText txt, x, y, maxWidth
	
	End


	'-- FILL STYLES

	Method SetFillStyle:Void(fs:String)
		'fs: HTML5 canvas style specifier

		renderContext.fillStyle = fs

	End

	Method SetFillColor:Void(r:Int, g:Int, b:Int)
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255)

		renderContext.fillStyle = xGetColorString(r, g, b)

	End

	Method SetFillColor:Void(r:Int, g:Int, b:Int, a:Float)
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255), a: alpha (0.0 to 1.0)
		
		renderContext.fillStyle = xGetColorString(r, g, b, a)

	End

	Method SetFillStyle:Void(cg:CanvasGradient)
		'cg: HTML5 canvasGradient object
		
		setFillGradient cg

	End

	Method SetFillStyle:Void(pat:CanvasPattern)
		'pat: HTML5 CanvasPattern object
		
		setFillPattern pat
	
	End


	'-- STROKE STYLES

	Method SetStrokeStyle:Void(ss:String)
		'ss: HTML5 canvas style specifier
		
		renderContext.strokeStyle = ss

	End

	Method SetStrokeColor:Void(r:Int, g:Int, b:Int)
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255)

		renderContext.strokeStyle = xGetColorString(r, g, b)

	End

	Method SetStrokeColor:Void(r:Int, g:Int, b:Int, a:Float)
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255), a: alpha (0.0 to 1.0)

		renderContext.strokeStyle = xGetColorString(r, g, b, a)

	End

	Method SetStrokeStyle:Void(cg:CanvasGradient)
		'cg: HTML5 canvasGradient object		

		setStrokeGradient cg

	End

	Method SetStrokeStyle:Void(pat:CanvasPattern)
		'pat: HTML5 CanvasPattern object
		
		setStrokePattern pat

	End


	'-- GRADIENTS, PATTERNS

	Method CreateLinearGradient:CanvasGradient(x0:Float, y0:Float, x1:Float, y1:Float)
		'return a HTML5 CanvasGradient object representing a linear line 
		'from coordinates x0, y0 to x1, y1
		
		Return renderContext.createLinearGradient(x0, y0, x1, y1)

	End

	Method CreateRadialGradient:CanvasGradient(x0:Float, y0:Float, r0:Float, x1:Float, y1:Float, r1:Float)
		'return a HTML5 CanvasGradient object representing a cone from
		'circle 1 centred x0, y0 with radius r0 to
		'circle 2 centred x1, y1 with radius r1

		Return renderContext.createRadialGradient(x0, y0, r0, x1, y1, r1)

	End

	Method CreatePattern:CanvasPattern(img:HTMLImageElement, rep:String)
		'return a HTML5 CanvasPattern object created from img (a HTMLImageElement object)
		'rep: HTML5 repetition specifier (repeat-x, repeat-y, repeat, no-repeat)

		Return renderContext.createPattern(img, rep)

	End


	'-- GEOMETRY
	
	Method DrawRect:Void(x:Float, y:Float ,w:Float, h:Float, fill:Bool = True, stroke:Bool = True)
		'Draw a rectangle at coordinate x, y with width w and height h, 
		'filled (fill) and/or stroked (stroke) with the current styles
	
		If fill Then renderContext.fillRect x, y, w, h
		If stroke Then renderContext.strokeRect x, y, w, h

	End
		
	Method DrawPoly:Void(coords:Float[], fill:Bool, stroke:Bool)
		'Draw a polygon along an array of vertices (coords) 
		'filled (fill) and/or stroked (stroke) with the current styles

		renderContext.beginPath()
		
	  	renderContext.moveTo(coords[0], coords[1])

		For Local i:Int = 0 Until coords.Length Step 2
	
	  		renderContext.lineTo(coords[i], coords[i + 1])
	  		If stroke Then renderContext.stroke()
	
		Next 
	
	 	renderContext.closePath()
	
		If fill Then renderContext.fill()
		
	End


	Method DrawLine:Void(x0:Float, y0:Float, x1:Float, y1:Float)
		'Draw a line from x1, y1 to x2, y2
			
		renderContext.beginPath()
	  	renderContext.moveTo(x0, y0)
		renderContext.lineTo(x1, y1)
		renderContext.stroke()
		renderContext.closePath()
	
	End


	'-- LINE STYLE
	' These methods set the line attributes of the canvas stroke.

	Method SetLine:Void(w:Float, cap:String, join:String, ml:Float)
		'w: width in pixels
		'cap: HTML5 cap style specifier (butt, round, square)
		'join: HTML5 line join style specifier (bevel, round, miter)
		'ml: miter limit
			
		renderContext.lineWidth = w
		renderContext.lineCap = cap
		renderContext.lineJoin = join
		renderContext.miterLimit = ml
	
	End

	Method SetLineWidth:Void(val:Float)
		'val: width in pixels

		renderContext.lineWidth = val

	End
	
	Method SetLineCap:Void(str:String)
		'str: HTML5 cap style specifier (butt, round, square)

		renderContext.lineCap = str

	End

	Method SetLineJoin:Void(str:String)
		'str: HTML5 line join style specifier (bevel, round, miter)
		
		renderContext.lineJoin = str

	End

	Function SetLineMiterLimit:Void(val:Float)
		'val: miter limit

		renderContext.miterLimit = val

	End

	
	'-- SHADOWS

	Method SetShadowColor:Void(str:String)
		'str: CSS color specifier

		renderContext.shadowColor = str	

	End


	Method SetShadowColor:Void(r:Int, g:Int, b:Int)
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255)

		renderContext.shadowColor = xGetColorString(r, g, b)	

	End


	Method SetShadowColor:Void(r:Int, g:Int, b:Int, a:Float)
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255), a: alpha (0.0 to 1.0)
		
		renderContext.shadowColor = xGetColorString(r, g, b, a)	

	End


	Method SetShadowOffsetX:Void(val:Float)
		'val: x offset value (pixels)

		renderContext.shadowOffsetX = val	

	End


	Method SetShadowOffsetY:Void(val:Float)
		'val: y offset value (pixels)

		renderContext.shadowOffsetY = val	

	End


	Method SetShadowBlur:Void(val:Float)
		'val: blur amount (0.0 to 1.0?)

		renderContext.shadowBlur = val	
	
	End


	'-- IMAGE DATA

	Method CreateImageData:ImageData(w:Int, h:Int)
		'return a new HTML5 canvas ImageData object of size w x h (width x height)
		
		Return renderContext.createImageData(w, h)
	
	End
	
	Method GetImageData:ImageData(x:Int, y:Int, w:Int, h:Int)
		'return a HTML5 canvas ImageData object from coordinate x, y
		'on the existing canvas and of size w x h (width x height)
		
		Return renderContext.getImageData(x, y, w, h)
	
	End

	Method DrawImageData:Void(imd:ImageData, x:Int, y:Int)
		'Draw a HTML5 ImageData object (imd) at coordinate x, y

		renderContext.putImageData imd, x, y
		
	End

	Method DrawImageData:Void(imd:ImageData, x:Int, y:Int, srcX:Int, srcY:Int, srcWidth:Int, srcHeight:Int)
		'Draw a portion (srcX, srcY to srcX + srcWidth, y + srcHeight) of an HTML5 ImageData object (imd) 
		'at coordinate x, y
		
		renderContext.putImageData imd, x - srcX, y - srcY, srcX, srcY, srcWidth, srcHeight
		
	End

	Method FillImageData:Void(imd:ImageData, r:Int, g:Int, b:Int, a:Int)
		'Fill a HTML5 ImageData object (imd) with a color and alpha component
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255), a: alpha (0 to 255)
	
		For Local i:Int = 0 Until imd.data.Length Step 4
			imd.data[i] = r
			imd.data[i+1] = g
			imd.data[i+2] = b
			imd.data[i+3] = a
		Next
	
	End	

	Method SetImageDataPixel:Void(imd:ImageData, x:Int, y:Int, r:Int, g:Int, b:Int, a:Int)
		'Set the pixel at coordinate x, y of a HTML5 ImageData object (imd) with a color and alpha component
		'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255), a: alpha (0 to 255)
		
		Local i:Int = ((y * 4) * imd.width) + (x * 4)

		imd.data[i] = r
		imd.data[i+1] = g
		imd.data[i+2] = b
		imd.data[i+3] = a
		
	End
		
	Method GetImageDataPixel:Int[](imd:ImageData, x:Int, y:Int)
		'return the color and alpha components at coordinate x, y of a HTML5 ImageData object (imd)
		'format: red, green, blue, alpha in a 4 element integer array
				
		Local i:Int = ((y * 4) * imd.width) + (x * 4)
		
		Return [imd.data[i], imd.data[i+1], imd.data[i+2], imd.data[i+3]]
		
	End 


End


'-- Internal convenience functions --

Function xGetColorString:String(r:Int, g:Int, b:Int)
	'return a CSS color specifier string
	'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255)

	Return ("rgb(" + String(r) + ", " + String(g) + ", " + String(b) + ")")

End

Function xGetColorString:String(r:Int, g:Int, b:Int, a:Float)
	'return a CSS color specifier string
	'r: red (0 to 255), g: green (0 to 255), b: blue (0 to 255), a: alpha (0.0 to 1.0)

	Return ("rgba(" + String(r) + ", " + String(g) + ", " + String(b) + ", " + String(a) + ")")

End

mojostate.monkey

#rem

mojostate.monkey

PURPOSE:	Provide the ability to save and restore mojo.graphics state 
			when used in conjunction with the HTML5 canvas wrapper.

#end

Strict

Import mojo.graphics
Import canvaswrapper

Global xMojoState:MojoState = New MojoState(xCanvas.renderContext)


Class MojoState


	Field renderContext:CanvasRenderingContext2D

	'Might need to add to this as mojo evolves.
	Field mojoAlpha:Float
	Field mojoCompositeOperation:String
	Field mojoFillStyle:String
	Field mojoStrokeStyle:String
	Field mojoLineWidth:Float
	Field mojoLineCap:String
	Field mojoLineJoin:String
	Field mojoLineMiterLimit:Float
	Field mojoShadowColor:String
	Field mojoShadowOffsetX:Float
	Field mojoShadowOffsetY:Float
	Field mojoShadowBlur:Float

	Field mojoMatrix:Float[]


	Method New(rc:CanvasRenderingContext2D)
	
		renderContext = rc
	
	End

	
	Method Save:Void()
	
		mojoAlpha = renderContext.globalAlpha
		mojoCompositeOperation = renderContext.globalCompositeOperation
		mojoFillStyle = renderContext.fillStyle
		mojoStrokeStyle = renderContext.strokeStyle
		mojoLineWidth = renderContext.lineWidth
		mojoLineCap = renderContext.lineCap
		mojoLineJoin = renderContext.lineJoin
		mojoLineMiterLimit = renderContext.miterLimit
		mojoShadowColor = renderContext.shadowColor
		mojoShadowOffsetX = renderContext.shadowOffsetX
		mojoShadowOffsetY = renderContext.shadowOffsetY
		mojoShadowBlur = renderContext.shadowBlur

		mojoMatrix = GetMatrix()
		
	End
	
	
	Method Restore:Void()
	
		renderContext.globalAlpha = mojoAlpha
		renderContext.globalCompositeOperation = mojoCompositeOperation
		renderContext.fillStyle = mojoFillStyle
		renderContext.strokeStyle = mojoStrokeStyle
		renderContext.lineWidth = mojoLineWidth
		renderContext.lineCap = mojoLineCap
		renderContext.lineJoin = mojoLineJoin
		renderContext.miterLimit = mojoLineMiterLimit
		renderContext.shadowColor = mojoShadowColor
		renderContext.shadowOffsetX = mojoShadowOffsetX
		renderContext.shadowOffsetY = mojoShadowOffsetY
		renderContext.shadowBlur = mojoShadowBlur
	
		SetMatrix mojoMatrix
		ApplyMatrix

	End
	
	
	Method ApplyMatrix:Void()

		Local arr:Float[] = GetMatrix()
		renderContext.setTransform arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]

	End


End

impixi

(Posted 2011) [#2]

Text examples:

text.monkey


#rem
-----------------------------------------------------------------------------
---------------------------- Canvas Text Test -------------------------------
-----------------------------------------------------------------------------
#end

Strict

'Import canvas wrapper functionality
Import canvaswrapper


Function Main:Int()

	Local ta:TestApp New TestApp
	
	Return 0
	
End


'-----


Class TestApp

	
	Method New()
						
		'Set the text alignment
		xCanvas.SetTextAlign "left"
						
		'Set the fill color using CSS color specifier strings. See:
		'http://dev.w3.org/csswg/css3-color/
		xCanvas.SetFillStyle "rgb(0, 0, 0)"
		
		'Draw a rect the full size of the canvas in the fill color (ie Cls)
		xCanvas.DrawRect 0, 0, xCanvas.renderContext.canvas.width, xCanvas.xCanvas.renderContext.canvas.height
		
		'Set the fill and stroke colors to red and green respectively
		xCanvas.SetFillStyle "rgb(255, 0, 0)"
		xCanvas.SetStrokeStyle "rgb(0, 255, 0)"
				
		'Set the font using valid CSS font specifiers. See:
		'http://dev.w3.org/html5/2dcontext/#text
		'http://www.w3.org/TR/css3-fonts
		xCanvas.SetFont "800 28px monospace"
				
		'Draw the text, filled and stroked.
		xCanvas.DrawText "Hello world!", 10, 40, True, True			
									
	End

End

textwithmojo.monkey

#rem
-----------------------------------------------------------------------------
---------------------------- Canvas Text (With Mojo) Test -------------------
-----------------------------------------------------------------------------
#end

Strict

Import mojo.app
Import mojo.input
Import mojo.graphics

'Import canvas wrapper functionality
Import canvaswrapper

'Import capability to save and restore mojo.graphics state
Import mojostate


Function Main:Int()

	Local ta:TestApp New TestApp
	
	Return 0
	
End


'-----


Class TestApp Extends App


	Field str:String

	Field aligns:String[]
	Field currentAlign:Int

	Field xPos:Int
	

	Method OnCreate:Int()

		'X coordinate value to base vertical alignment around
		xPos = Floor(DeviceWidth() * 0.5)
		
		'Sample text
		str =  "Click to change alignment."
						
		'Set the initial alignment
		aligns = ["left", "center", "right"]
		currentAlign = 0
		xCanvas.SetTextAlign aligns[currentAlign]
		
		SetUpdateRate(60)		
									
		Return 0
		
	End
	
	
	Method OnUpdate:Int()
	
		'Change the text alignment when the mouse is clicked or the screen is touched.
		If TouchHit(0) 
			currentAlign += 1
			If (currentAlign >= aligns.Length) Then currentAlign = 0
			xCanvas.SetTextAlign aligns[currentAlign]
		Endif

		Return 0
		
	End
	
	
	Method OnRender:Int()

		Cls 0, 0, 0
		
		'For savestate/loadstate testing purposes:
		SetAlpha 1.0
		SetColor 255, 255, 255
		
		'Save mojo's current state, before we start manipulating the canvas
		xMojoState.Save
		
		'Set the fill and stroke colors using CSS color specifier strings. See:
		'http://dev.w3.org/csswg/css3-color/
		xCanvas.SetFillStyle "rgb(255, 0, 0)"
		xCanvas.SetStrokeStyle "rgb(0, 255, 0)"
				
		'Set the font using a CSS font specifier. See:
		'http://dev.w3.org/html5/2dcontext/#text
		'http://www.w3.org/TR/css3-fonts
		xCanvas.SetFont "800 28px monospace"
				
		'Draw the text and its width, filled and stroked
		Local tw:String = String(xCanvas.GetTextWidth(str))
		xCanvas.DrawText str + " " + tw + " pixels", xPos, 40, True, True
		'Draw the text filled and stroked, and scaled within 200 pixels
		xCanvas.DrawText str, xPos, 90, 200, True, True
	
		'Try a different font and stroke color, get new text width
		xCanvas.SetFont "italic 28px sans-serif"
		xCanvas.SetStrokeColor 255, 0, 255
		
		tw = String(xCanvas.GetTextWidth(str))
		
		'Draw the text, stroked only	
		xCanvas.DrawText str + " " + tw + " pixels", xPos, 140, False, True
	
		'Most native mojo.graphics commands should affect the canvas as expected.
		SetAlpha 0.5
		SetColor 0, 255, 0
		
		'Try another font, filled, no stroke
		xCanvas.SetFont "18px serif"
		xCanvas.DrawText "Hello world!", xPos, 240, True, False 
			
		'Restore previously saved Mojo state.
		xMojoState.Restore
		
		'Test that the previous mojo state was restored correctly
		'(should see a fully opaque white rectangle)
		DrawRect 10, 10, 10, 10
		
		Return 0

	End


End

impixi

(Posted 2011) [#3]

ImageData example:

imagedata.monkey

#rem
-----------------------------------------------------------------------------
---------------------------- Canvas Image Data Test -------------------------
-----------------------------------------------------------------------------
#end

Strict

Import mojo.app
Import mojo.input

Import monkey.random

'Import canvas wrapper functionality
Import canvaswrapper


Function Main:Int()

	Local ta:TestApp New TestApp
	
	Return 0
	
End


'-----


Class TestApp Extends App


	Field imd:ImageData
	

	Method OnCreate:Int()

		'Create a new ImageData object with dimensions 128x128 pixels.
		imd = xCanvas.CreateImageData(128, 128)
		
		RandomizePixels
		
		SetUpdateRate(60)		
									
		Return 0
		
	End
	
	
	Method OnUpdate:Int()
	
		'Randomize the imd's pixels when the mouse is clicked or the screen is touched.
		If TouchHit(0) Then RandomizePixels
		
		Return 0
		
	End
	
	
	Method OnRender:Int()

		'Draw the ImageData object at xy coordinate 5, 5
		xCanvas.DrawImageData imd, 5, 5
		
		'Draw only the bottom right half of the ImageData object at xy cordinate 5, 135
		xCanvas.DrawImageData imd, 5, 135, imd.width * 0.5, imd.height * 0.5, imd.width * 0.5, imd.height * 0.5

		Return 0

	End

	
	Method RandomizePixels:Void()
	
		For Local x:Int = 0 Until imd.width
			For Local y:Int = 0 Until imd.height
				Local r:Int = Floor(Rnd(0, 256))
				Local g:Int = Floor(Rnd(0, 256))
				Local b:Int = Floor(Rnd(0, 256))
				Local a:Int = Floor(Rnd(128, 256))
				xCanvas.SetImageDataPixel(imd, x, y, r, g, b, 255)
			Next
		Next
	
	End


End

impixi

(Posted 2011) [#4]

Textured Polygon example:

texpoly.monkey

#rem
-----------------------------------------------------------------------------
---------------------------- Canvas Textured Polygon Test -------------------
-----------------------------------------------------------------------------
#end

Strict

Import mojo.app
Import mojo.input

'Import canvas wrapper functionality
Import canvaswrapper


Function Main:Int()

	Local ta:TestApp New TestApp
	
	Return 0
	
End


'-----


Class TestApp Extends App


	Field texture:CanvasPattern
	Field textureCreated:Bool
	
	Field htmlImage:HTMLImageElement
	
	Field polyArr:Float[]


	Method OnCreate:Int()

		'Coordinates for the polygon
		polyArr = [10.0, 10.0, 300.0, 60.0, 180.0, 150.0, 40.0, 100.0, 10.0, 10.0]
		
		'Image to use for the texture
		htmlImage = loadHTMLImage("http://www.monkeycoder.co.nz/img/logo/cute/monkey1.png")
		
		'Flag to indicate whether the texture has been created yet or not
		textureCreated = False			
		
		SetUpdateRate(60)		
									
		Return 0
		
	End
	
	
	Method OnUpdate:Int()
	
		'Keep checking to see if the image has been loaded.
		'When the image has finished loading, create the texture.
		If (htmlImage.complete) And (Not textureCreated)
			texture = xCanvas.CreatePattern(htmlImage, "repeat")
			textureCreated = True
		Endif
		
		Return 0
		
	End
	
	
	Method OnRender:Int()

		'Set a black outline for the polygon
		xCanvas.SetStrokeColor 0, 0, 0, 1.0
		xCanvas.SetLineWidth 2.0

		'Fill the polygon red, and texture it (when the texture has been created)
		If (texture <> Null) Then xCanvas.SetFillStyle texture Else xCanvas.SetFillColor 255, 0, 0, 255
		
		'Draw the polygon, filled, textured and stroked
		xCanvas.DrawPoly polyArr, True, True

		Return 0

	End



End

impixi

(Posted 2011) [#5]

More examples? Let me know what you'd like...

DruggedBunny

(Posted 2011) [#6]

Just tried this -- good stuff, especially the poly and imageData access. Thanks!

impixi

(Posted 2011) [#7]

22-NOV-2011

Fixed a little bug in canvasmods.js

Richard Betson

(Posted 2011) [#8]

More examples?

How do I do a fill gradient on a poly?

Great Work.

impixi

(Posted 2011) [#9]

Linear and Radial Gradients Example

gradients.monkey

#rem
-----------------------------------------------------------------------------
---------------------------- Gradient Test ----------------------------------
-----------------------------------------------------------------------------
#end

Strict

Import mojo.app

'Import canvas wrapper functionality
Import canvaswrapper


Function Main:Int()

	Local ta:TestApp New TestApp
	
	Return 0
	
End


'-----


Class TestApp Extends App


	Field gradLinear:CanvasGradient
	Field gradRadial:CanvasGradient
	
	Field polyArr1:Float[]
	Field polyArr2:Float[]


	Method OnCreate:Int()

		polyArr1 = [10.0, 10.0, 300.0, 60.0, 180.0, 150.0, 40.0, 100.0, 10.0, 10.0]
		polyArr2 = [10.0, 160.0, 300.0, 210.0, 180.0, 300.0, 40.0, 250.0, 10.0, 160.0]
		
		'Create a simple linear gradient
		gradLinear = xCanvas.CreateLinearGradient(0, 0, 0, 150)
		gradLinear.addColorStop(0.0, "#00ABEB")
	    gradLinear.addColorStop(0.5, "#00FFF0")
    	gradLinear.addColorStop(0.5, "#66CC00")
    	gradLinear.addColorStop(1.0, "#00FFF0")
		
		'Create a radial gradient based around polyArr2's centre point
		Local centreXY:Float[] = PolyCentroid(polyArr2)
		gradRadial = xCanvas.CreateRadialGradient(centreXY[0], centreXY[1], 0, centreXY[0], centreXY[1], 100)
      	gradRadial.addColorStop(0.0, "#FF0000")
      	gradRadial.addColorStop(0.5, "#00FF00")
      	gradRadial.addColorStop(1.0, "#0000FF")
		
		
		'********************
		'NOTE: There's more information on gradients here:
		'http://dev.w3.org/html5/2dcontext/#colors-and-styles
		'********************
		
		
		SetUpdateRate(60)		
									
		Return 0
		
	End
	
	
	Method OnRender:Int()

		xCanvas.SetStrokeColor 0, 0, 0, 1.0
		xCanvas.SetLineWidth 2.0

		'Set the linear gradient as the fill style...
		xCanvas.SetFillStyle gradLinear
		'...and render the first polygon.
		xCanvas.DrawPoly polyArr1, True, True

		'Set the radial gradient as the fill style...
		xCanvas.SetFillStyle gradRadial
		'...and render the second polygon.
		xCanvas.DrawPoly polyArr2, True, True

		Return 0

	End

End


'Get the centre point of a polygon
Function PolyCentroid:Float[](poly:Float[])

	Local result:Float[2]	'i0 = x, i1 = y
    result[0] = 0
    result[1] = 0

    For Local i:Int = 0 Until (poly.Length - 2) Step 2
		result[0] += (poly[i] + poly[i+2]) * ((poly[i] * poly[i+3]) - (poly[i+2] * poly[i+1]))
		result[1] += (poly[i+1] + poly[i+3]) * ((poly[i] * poly[i+3]) - (poly[i+2] * poly[i+1]))
    Next

    Local area:Float = PolygonArea(poly)

    result[0] = Abs(result[0] / 6.0 / area)
    result[1] = Abs(result[1] / 6.0 / area)

	Return result

End

'FROM:
'http://www.monkeycoder.co.nz/Community/posts.php?topic=1659
Function PolygonArea:Float(polyPoints:Float[])

	Local accum:Float
	Local  j:Int = polyPoints.Length()-2

	For Local i:Int =0 Until polyPoints.Length() Step 2
		accum += polyPoints[j] * polyPoints[i+1] - polyPoints[i] * polyPoints[j+1]
    	j=i 
	Next

	Return accum / 2

End

Richard Betson

(Posted 2011) [#10]

^Awesome, works great. Thanks. Off to do a demo. :p

Armitage1982

(Posted 2011) [#11]

Waw, I didn't know you could do that, this is clever !