drawImage example 3
function canvasReady() {
draw(document.getElementById('canvas').getContext('2d'));
}
function draw(ctx) {
ctx.translate(-10, 5);
ctx.scale(1.2, 0.8);
ctx.rotate(5 * Math.PI / 180);
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI * 2, 1);
ctx.clip();
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104);
ctx.drawImage(document.getElementById('frame'),0,0);
ctx.stroke();
}