Depth test

by jcubed111

HTML

<canvas id='canvas' width='200' height='200'></canvas>

CSS

body{
    background:#EEE;
}
canvas{
    width:200px;
    height:200px;
    background:#FFF;
    border:1px solid #CCC;
    margin:100px;
}

JavaScript

//depth test

ctx=document.getElementById('canvas').getContext('2d');

zoomFactor=.0145;



ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);


ctx.moveTo(50, 50);
ctx.lineTo(50/100/zoomFactor, 50/100/zoomFactor);

ctx.moveTo(150, 50);
ctx.lineTo(150/100/zoomFactor, 50/100/zoomFactor);

ctx.moveTo(150, 150);
ctx.lineTo(150/100/zoomFactor, 150/100/zoomFactor);

ctx.moveTo(50, 150);
ctx.lineTo(50/100/zoomFactor, 150/100/zoomFactor);


ctx.moveTo(50/100/zoomFactor, 50/100/zoomFactor);
ctx.lineTo(150/100/zoomFactor, 50/100/zoomFactor);
ctx.lineTo(150/100/zoomFactor, 150/100/zoomFactor);
ctx.lineTo(50/100/zoomFactor, 150/100/zoomFactor);
ctx.lineTo(50/100/zoomFactor, 50/100/zoomFactor);

ctx.stroke();