Linen.js - Positioning Reference Point

by Brian Wendt

HTML

<script src="https://cdn.rawgit.com/BrianWendt/Linen/3203b3d2/linen.js"></script>
<div>
    <h2>Sample 1 - Positioning Reference Point</h2>
    <canvas id="Sample1">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
</div>

<p>Find out more @ <a href="https://github.com/BrianWendt/Linen">github.com/BrianWendt/Linen</a></p>

JavaScript

/* Sample1 - Positioning Reference Point */
var Sample1 = new Linen.Canvas(document.getElementById('Sample1'), 2.5, 2.5);

Sample1.setBackground('rgb(250,250,250)');

/* Center from Top Left */
Sample1.addRectangle()
		.setFillStyle('red')
    .setXY('50%', '50%')
    .setWidth(1)
    .setHeight(1);
    
/* Center from Top Right */
Sample1.addRectangle()
		.setAlignment('right')
		.setFillStyle('blue')
    .setXY('50%', '50%')
    .setWidth(1)
    .setHeight(1);
    
/* Center from Bottom Left */
Sample1.addRectangle()
		.setVAlignment('bottom')
		.setFillStyle('green')
    .setXY('50%', '50%')
    .setWidth(1)
    .setHeight(1);
    
/* Center from Bottom Right */
Sample1.addRectangle()
		.setAlignment('right')
    .setVAlignment('bottom')
		.setFillStyle('yellow')
    .setXY('50%', '50%')
    .setWidth(1)
    .setHeight(1);
    
/* Center from Middle Center */
Sample1.addRectangle()
		.setAlignment('center')
    .setVAlignment('middle')
		.setFillStyle('black')
    .setXY('50%', '50%')
    .setWidth(1)
    .setHeight(1);

Sample1.render();