<paper

canvas>

<paper-canvas>

Provides you a simple wrapper for Paper.js.

In the following demo, we set a basic canvas, with red background.

<paper-canvas width="300px" height="60px" background="red"></paper-canvas>

In the following demo, we draw a simple circle into the canvas with Paper.js API.

<paper-canvas class="shadow" width="300px" height="300px" id="circleCanvas"></voice-player>
<script>
window.addEventListener('polymer-ready', function(e) {
		var paperCanvas = document.querySelector('#circleCanvas');
		paperCanvas.addEventListener('redraw', function(){					
			var center = new this.paper.Point(150, 150);							
			var circle = this.paper.Path.Circle(center, 100);												
			circle.fillColor = 'green';	
			this.draw();
		});											
});
</script>

Options

Attribute	Options	Default	Description
width	string	800px	Specifies entire element width.
height	strings	600px	Specifies entire element height.
background	string	#FFF	Specifies the background color of the layer.

Methods

Method	Parameters	Returns	Description
redraw()	None	Nothing	Redraw canvas with a background rectangle.
clear()	None	Nothing	Clears entire canvas layer.
getDataURL()	MIME	String	Gets the base64 converted URL based on the MIME.
draw()	None	Nothing	Process data and draw into the canvas.

Events

Event	Description
onredraw	Triggers when the canvas was recreated.
onclear	Triggers when the canvas layer was cleared.
ondrawn	Triggers when the canvas was been drawn.