Webtags

Rendering web tags using HTML5 Canvas. It is useful for my personal web page, freelancer web page for examples…

On the Webtags site you'll find the Screencast, Rendering demo and Getting started. You can use online version of the Webtags dashboard.

Contents

• Install via Bower
• Getting started
• Advanced options
• Several Webtags per page

Install via Bower

bower install webtags

Getting started

<canvas id="webtags">
	This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<script type="text/javascript" src="render.min.js"></script>
<script type="text/javascript">
new Webtags({
	"items": [
		{
			"label": "GitHub",
			"url": "https://github.com/earthperson/Webtags"
		},
		{
			"label": "Webtags",
			"url": "http://earthperson.github.io/Webtags/"
		},
		{
			"label": "Dashboard",
			"url": "http://earthperson.github.io/Webtags/dashboard/"
		},
		{
			"label": "Personal web page",
			"url": "http://earthperson.info.s3-website-eu-west-1.amazonaws.com/en/"
		},
		{
			"label": "Freelancer web page",
			"url": "http://dev.earthperson.info.s3-website-eu-west-1.amazonaws.com/en/"
		}
	]
});
</script>

Here you can download render.min.js (6.8K, gzipped ~2.1K).

Advanced options

new Webtags({
	"items": [{
		"label": "Webtags",
		"url": "https://github.com/earthperson/Webtags"
	}],
	"id": "webtags",
	"type": "rounded", // "square"
	"width": 500,
	"height": 350,
	"border": true,
	"grid": false,
	"style": {
		"border": "1px solid #5e8cc2"
	},
	"tag": {
		"width": 100,
		"height": 32,
		"context": {
			"fillStyle": "#5e8cc2",
			"textBaseline": "top",
			"font": "12px Arial",
			"strokeStyle": "#5e8cc2",
			"lineWidth": 2, 
			"lineJoin": "round",
			"lineCap": "round",
			"shadowOffsetX": 2,
			"shadowOffsetY": 2,
			"shadowBlur": 2,
			"shadowColor": "rgba(54, 111, 179, 0.4)"
		}
	}
});

Here you can download render.min.js (6.8K, gzipped ~2.1K).

Several Webtags per page

<canvas id="webtags-1">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
<canvas id="webtags-2">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
<canvas id="webtags-3">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
<script type="text/javascript" src="render.min.js"></script>
<script type="text/javascript">
new Webtags({"id": "webtags-1", "items": [{
	"label": "GitHub",
	"url": "https://github.com/earthperson/Webtags"
}], "tag": {"context": {"fillStyle": "red", "strokeStyle": "red"}}});

new Webtags({"id": "webtags-2", "items": [{
	"label": "GitHub",
	"url": "https://github.com/earthperson/Webtags"
}], "tag": {"context": {"fillStyle": "green", "strokeStyle": "green"}}});

new Webtags({"id": "webtags-3", "items": [{
	"label": "GitHub",
	"url": "https://github.com/earthperson/Webtags"
}], "tag": {"context": {"fillStyle": "blue", "strokeStyle": "blue"}}});
</script>

Here you can download render.min.js (6.8K, gzipped ~2.1K).