Canvas Path

Experiment 1

by Konstantin Cryman

HTML

<canvas id="MyCan" ></canvas>

CSS

#MyCan{
  width: 700px;
  height: 400px;
  background:  #000000;
}

JavaScript

var can = document.getElementById('MyCan');
var ctx = can.getContext('2d');

can.width = 500;
can.hight = 300;

function drawRect( x, y, w, h, color ){
    ctx.fillStyle = color || '#ff0000';
		ctx.fillRect( x, y, w, h );
}

// multiple scale()s to simulate nested draw calls

//ctx.save();
//ctx.scale( 2, 2 );
//ctx.save();
//ctx.scale( 2, 2 );
//ctx.save();
//ctx.scale( 2, 2 );
//ctx.save();
//ctx.scale( 2, 2 );

// scale is currently 8,8
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'low';
ctx.font = '6px Helvetica';
ctx.fillStyle = '#fff';
ctx.textBaseline = 'top';
ctx.fillText('Test', 0, 0);

//ctx.restore();
//ctx.restore();
//ctx.restore();
//ctx.restore();

ctx.font = '96px Helvetica';
ctx.fillStyle = '#fff';
ctx.textBaseline = 'top';
ctx.fillText('Test', 220, -8);

console.log( ctx );

var animate = function(){
    requestAnimationFrame( animate );
};