Rendering web tags using HTML5 Canvas
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dashboard
tests
.gitignore
Gruntfile.js
LICENSE
README.md
Webtags.docx
bower.json
index.html
package.json
render.js
render.min.js
webtag-prototype.svg

README.md

webtags Webtags

Bower version

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

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/en/"
		},
		{
			"label": "Freelancer web page",
			"url": "http://dev.earthperson.info/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).