Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Canvas (gallery-canvas) on cdn

Last Updated: 04/17/13

+ 0 -

John Lindal

YUI Contributor

See 50 more by this user.

Created: 02/15/11
Last CDN Push: 05/16/12
Build Tag: gallery-2012.05.16-20-37
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

Provides a wrapper for a canvas 2d context.

Same api as a canvas 2d context.
Adds move() and line() which take relative coordinates.
Rounded rectangles.
Store polygons as a list of points instead of code.
Option to turn on pixel alignment, for cleaner strokes.

Tags:
jafl
canvas
2d

Example showing how to construct and use the Context2d wrapper.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.05.16-20-37'
}).use('gallery-canvas', function(Y)
{
	var canvas = Y.Node.create('<canvas width="100" height="100"></canvas>');
	Y.one('#container').appendChild(canvas);
 
	var context = new Y.Canvas.Context2d(canvas);
 
	context.beginPath();
	context.moveTo(10,10);
	context.line(10,10);
	context.stroke();
 
	var p =
	[
		{ dy:10 },
		{ dx:10 },
		{ dx:-10, dy:-10 }
	];
	context.beginPath();
	context.moveTo(30,10);
	context.poly(p);
	context.stroke();
 
	context.roundedRect(10, 50, 40, 90, 5); // automatically calls beginPath()
	context.stroke();
});

Forum Posts

Subject	Author	Date
Black objects	Lucas Maliszewski	10/26/12
Re: Black objects	John Lindal	10/27/12